feat(spa): add wishlist functionality with localStorage and UI integration

2026-06-06 19:40:35 +07:00
1 parent ca31564ee7
commit 091eeef7d8
@@ -0,0 +1,67 @@
+import { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import Navbar from '../components/Navbar'
+import Footer from '../components/Footer'
+import ProductCard from '../components/ProductCard'
+import { API_BASE, type Category } from '../types'
+import { useWishlistStore } from '../store/wishlistStore'
+import { Heart } from 'lucide-react'
+
+export default function WishlistPage() {
+  const [categories, setCategories] = useState<Category[]>([])
+  const { items } = useWishlistStore()
+
+  useEffect(() => {
+    fetch(`${API_BASE}/categories`)
+      .then(res => res.json())
+      .then(setCategories)
+      .catch(console.error)
+  }, [])
+
+  return (
+    <div className="min-h-screen flex flex-col bg-pop-bg">
+      <Navbar categories={categories} />
+
+      <main className="flex-1 max-w-7xl w-full mx-auto px-6 pt-32 pb-24 space-y-12 animate-fade-in">
+        
+        {/* Header */}
+        <div className="text-center space-y-4">
+          <div className="w-16 h-16 bg-rose-50 rounded-full flex items-center justify-center mx-auto border border-rose-100">
+            <Heart className="w-8 h-8 text-rose-500 fill-rose-500" />
+          </div>
+          <h1 className="text-4xl font-bold tracking-tight text-pop-black">Your Wishlist</h1>
+          <p className="text-spa-stone max-w-lg mx-auto">
+            Items you've loved. Keep them here until you're ready to make them yours.
+          </p>
+        </div>
+
+        {items.length === 0 ? (
+          <div className="text-center py-24 bg-white shadow-sm border border-spa-stone/10 rounded-3xl max-w-2xl mx-auto space-y-6">
+            <div className="w-20 h-20 bg-spa-light rounded-full flex items-center justify-center mx-auto">
+              <Heart className="w-10 h-10 text-spa-stone/30" />
+            </div>
+            <h2 className="text-2xl font-bold text-pop-black">Your wishlist is empty</h2>
+            <p className="text-spa-stone">Explore our products and tap the heart icon to save your favorites.</p>
+            <div className="pt-4">
+              <Link
+                to="/shop"
+                className="inline-block px-8 py-3.5 bg-spa-forest text-white font-bold rounded-lg tracking-widest uppercase hover:bg-spa-stone transition-all duration-300 shadow-sm"
+              >
+                Browse Shop
+              </Link>
+            </div>
+          </div>
+        ) : (
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-8">
+            {items.map(product => (
+              <ProductCard key={product.id} product={product} />
+            ))}
+          </div>
+        )}
+
+      </main>
+
+      <Footer categories={categories} />
+    </div>
+  )
+}