admin/homaroma
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix(spa): complete checkout flow, UI standardization, and tailwind v4 styling fixes

Browse Source
This commit is contained in:
Your Name committed 2026-06-06 19:10:19 +07:00
1 parent 83df238bab
commit d8bff72e4e
24 files changed
+1169 -402
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/spa/src/pages/SearchPage.tsx
+21 -22
View File
@@ -3,6 +3,7 @@ import { useSearchParams, Link } from 'react-router-dom'
import Navbar from '../components/Navbar'
import Footer from '../components/Footer'
import ProductCard from '../components/ProductCard'
import EmptyState from '../components/EmptyState'
import { API_BASE, type Category, type Product } from '../types'
export default function SearchPage() {
@@ -46,20 +47,20 @@ export default function SearchPage() {
}
return (
<div className="min-h-screen">
<div className="min-h-screen bg-pop-bg">
<Navbar categories={categories} />
{/* Search Header */}
<div className="pt-32 pb-16 px-6 bg-night-800/20 border-b border-white/5">
<div className="pt-32 pb-16 px-6 bg-spa-light border-b border-spa-stone/10">
<div className="max-w-3xl mx-auto space-y-6 text-center">
<p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">
<p className="text-spa-forest uppercase tracking-[0.4em] text-xs font-bold opacity-80">
Discover
</p>
<h1 className="text-5xl font-bold">Search Products</h1>
<h1 className="text-5xl font-bold text-pop-black">Search Products</h1>
<form onSubmit={handleSubmit} className="relative">
<div className="flex glass border border-white/10 rounded-2xl overflow-hidden focus-within:border-cyan-glow/40 transition-colors">
<svg className="w-5 h-5 text-slate-400 m-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<div className="flex bg-white border border-spa-stone/20 rounded-2xl overflow-hidden shadow-sm focus-within:border-spa-forest focus-within:ring-1 focus-within:ring-spa-forest transition-all">
<svg className="w-5 h-5 text-spa-stone m-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<input
@@ -67,12 +68,12 @@ export default function SearchPage() {
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Search by scent name, category..."
className="bg-transparent border-none outline-none text-base p-4 pl-0 w-full text-white placeholder-slate-500"
className="bg-transparent border-none outline-none text-base p-4 pl-0 w-full text-pop-black placeholder-spa-stone/60"
autoFocus
/>
<button
type="submit"
className="bg-white text-night-900 px-8 font-bold text-xs uppercase tracking-widest hover:bg-cyan-glow transition-colors shrink-0"
className="bg-spa-forest text-white px-8 font-bold text-xs uppercase tracking-widest hover:bg-spa-stone transition-colors shrink-0"
>
Search
</button>
@@ -85,7 +86,7 @@ export default function SearchPage() {
<Link
key={cat.id}
to={`/search?q=${encodeURIComponent(cat.name)}`}
className="glass px-4 py-1.5 rounded-full text-xs font-medium hover:border-cyan-glow/30 hover:text-cyan-glow transition-all duration-300"
className="bg-white border border-spa-stone/20 px-4 py-1.5 rounded-full text-xs font-medium text-spa-stone hover:border-spa-forest hover:text-spa-forest shadow-sm transition-all duration-300"
>
{cat.name}
</Link>
@@ -97,34 +98,32 @@ export default function SearchPage() {
{/* Results */}
<div className="max-w-7xl mx-auto px-6 py-16 space-y-8">
{!searched && !query && (
<div className="text-center py-20 space-y-3 text-slate-500">
<div className="text-center py-20 space-y-3 text-spa-stone">
<p className="text-5xl">🔍</p>
<p className="text-lg text-slate-400">Type something to discover our collection</p>
<p className="text-lg font-medium text-pop-black">Type something to discover our collection</p>
</div>
)}
{searched && (
<p className="text-slate-400 text-sm">
<p className="text-spa-stone text-sm font-medium">
{loading ? 'Searching...' : `${products.length} result${products.length !== 1 ? 's' : ''} for `}
{!loading && <span className="text-white font-semibold">"{query}"</span>}
{!loading && <span className="text-pop-black font-bold">"{query}"</span>}
</p>
)}
{loading ? (
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="rounded-2xl bg-white/5 animate-pulse h-96" />
<div key={i} className="rounded-2xl bg-spa-stone/10 animate-pulse h-96" />
))}
</div>
) : searched && products.length === 0 ? (
<div className="text-center py-20 space-y-4">
<p className="text-5xl">🌿</p>
<p className="text-xl text-slate-400">No results found</p>
<p className="text-slate-500 text-sm">Try a different keyword or browse our categories</p>
<Link to="/shop" className="inline-block mt-4 px-8 py-3 bg-white/10 hover:bg-white hover:text-night-900 text-white font-bold rounded-lg uppercase tracking-widest text-xs transition-all duration-300">
Browse All Products
</Link>
</div>
<EmptyState
title="No results found"
message="Try a different keyword or browse our categories"
actionText="Browse All Products"
actionLink="/shop"
/>
) : (
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{products.map((p) => <ProductCard key={p.id} product={p} />)}