Full website

apps/website/src/components/WishlistClient.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import Link from 'next/link'
+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="mx-auto max-w-2xl rounded-3xl bg-white px-6 py-20 text-center shadow-brutal">
+        <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-pop-black">Your wishlist is empty</h2>
+        <p className="mx-auto mt-3 max-w-md text-gray-500">
+          Explore our products and tap the heart icon to save your favorites.
+        </p>
+        <Link
+          href="/shop"
+          className="mt-8 inline-flex rounded-full bg-pop-pink px-8 py-3 text-sm font-bold uppercase tracking-[0.18em] text-white transition hover:bg-pop-red"
+        >
+          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>
+  )
+}