40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
"use client"
|
|
|
|
import Link from './LocalizedLink'
|
|
import { Heart } from 'lucide-react'
|
|
|
|
import ProductCard from './ProductCard'
|
|
import { useWishlistStore } from '../store/wishlistStore'
|
|
|
|
export default function WishlistClient() {
|
|
const items = useWishlistStore((state) => state.items)
|
|
|
|
if (items.length === 0) {
|
|
return (
|
|
<section className="ui-panel mx-auto max-w-2xl px-6 py-20 text-center">
|
|
<div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-rose-50 text-rose-300">
|
|
<Heart className="h-10 w-10" />
|
|
</div>
|
|
<h2 className="text-2xl font-semibold text-text-main">Your wishlist is empty</h2>
|
|
<p className="mx-auto mt-3 max-w-md text-muted-text">
|
|
Explore our products and tap the heart icon to save your favorites.
|
|
</p>
|
|
<Link
|
|
href="/shop"
|
|
className="mt-8 inline-flex rounded-full bg-brand-primary px-8 py-3 text-sm font-bold uppercase tracking-[0.18em] text-surface-card transition hover:bg-brand-primary-hover"
|
|
>
|
|
Browse Shop
|
|
</Link>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<section className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
|
{items.map((product) => (
|
|
<ProductCard key={product.id} product={product} />
|
|
))}
|
|
</section>
|
|
)
|
|
}
|