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/CategoryPage.tsx
+15 -14
View File
@@ -85,26 +85,27 @@ export default function CategoryPage() {
alt={category?.name}
onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
/>
<div className="absolute inset-0 bg-gradient-to-t from-night-900 via-night-900/60 to-transparent" />
<div className="absolute inset-0 bg-night-900/40" />
<div className="absolute inset-0 bg-gradient-to-t from-night-900/90 via-night-900/10 to-transparent" />
<div className="absolute bottom-0 left-0 right-0 px-6 pb-10 pt-20">
<div className="max-w-7xl mx-auto">
{/* Breadcrumb */}
<div className="flex items-center gap-2 text-xs text-slate-400 uppercase tracking-widest mb-4">
<div className="flex items-center gap-2 text-xs text-spa-sage/80 uppercase tracking-widest mb-4 font-semibold">
<Link to="/" className="hover:text-white transition-colors">Home</Link>
<span>/</span>
<Link to="/shop" className="hover:text-white transition-colors">Shop</Link>
<span>/</span>
<span className="text-cyan-glow">{category?.name ?? '...'}</span>
<span className="text-white">{category?.name ?? '...'}</span>
</div>
<h1 className="text-4xl md:text-5xl font-bold">
<h1 className="text-4xl md:text-5xl font-bold text-white">
{loading ? (
<div className="h-10 w-48 bg-white/10 animate-pulse rounded-lg" />
<div className="h-10 w-48 bg-white/20 animate-pulse rounded-lg" />
) : (
category?.name
)}
</h1>
{!loading && category?._count && (
<p className="text-slate-400 mt-2">
<p className="text-spa-sage mt-2">
{category._count.products} products available
</p>
)}
@@ -120,10 +121,10 @@ export default function CategoryPage() {
<Link
key={cat.id}
to={`/category/${cat.id}`}
className={`px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest transition-all duration-300 ${
className={`px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest transition-all duration-300 border ${
cat.id === category?.id
? 'bg-cyan-glow text-night-900 shadow-[0_0_15px_rgba(102,252,241,0.3)]'
: 'glass hover:bg-white/10'
? 'bg-spa-forest text-white border-spa-forest shadow-md'
: 'bg-white text-spa-stone border-spa-stone/20 hover:border-spa-forest hover:text-spa-forest shadow-sm'
}`}
>
{cat.name}
@@ -134,19 +135,19 @@ export default function CategoryPage() {
{error ? (
<div className="text-center py-24 space-y-3">
<p className="text-4xl">⚠️</p>
<p className="text-slate-400">{error}</p>
<Link to="/shop" className="text-cyan-glow text-sm hover:underline">
<p className="text-spa-stone font-medium">{error}</p>
<Link to="/shop" className="text-spa-forest font-bold text-sm hover:underline">
Back to Shop
</Link>
</div>
) : loading ? (
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8">
{Array.from({ length: 9 }).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>
) : products.length === 0 ? (
<div className="text-center py-24 text-slate-500 space-y-3">
<div className="text-center py-24 text-spa-stone/60 space-y-3 font-medium">
<p className="text-4xl">🌿</p>
<p>No products in this category yet.</p>
</div>
@@ -161,7 +162,7 @@ export default function CategoryPage() {
{/* Invisible target for IntersectionObserver */}
{displayCount < products.length && (
<div ref={loaderRef} className="py-12 flex justify-center">
<div className="w-8 h-8 rounded-full border-2 border-cyan-glow border-t-transparent animate-spin" />
<div className="w-8 h-8 rounded-full border-2 border-spa-forest border-t-transparent animate-spin" />
</div>
)}
</div>