Deploy

src/app/menu/page.tsx

@@ -0,0 +1,122 @@
+'use client'
+import { useState, useMemo } from 'react'
+import { useProducts } from '@/hooks/useProducts'
+import { useVulaCart } from '@/hooks/useVulaCart'
+import Image from 'next/image'
+import Link from 'next/link'
+import { ShoppingCart, Utensils } from 'lucide-react'
+
+const CURRENCY_SYMBOLS: Record<string, string> = { zar: 'R', usd: '$', eur: '€', gbp: '£', kes: 'KSh', ngn: '₦', ghs: '₵' }
+const formatPrice = (amount: number, code?: string) => {
+  const sym = CURRENCY_SYMBOLS[(code ?? '').toLowerCase()] ?? (code?.toUpperCase() ?? '')
+  return `${sym}${(amount / 100).toFixed(2)}`
+}
+
+const DEFAULT_CATEGORIES = ['Starters', 'Mains', 'Drinks', 'Desserts']
+
+export default function MenuPage() {
+  const { products, loading, error } = useProducts(100)
+  const { addToCart } = useVulaCart()
+  const [activeCategory, setActiveCategory] = useState('All')
+
+  const categories = useMemo(() => {
+    const seen = new Set<string>()
+    products.forEach(p => { if ((p as any).collection?.title) seen.add((p as any).collection.title) })
+    const fromData = Array.from(seen)
+    return ['All', ...(fromData.length > 0 ? fromData : DEFAULT_CATEGORIES)]
+  }, [products])
+
+  const displayed = useMemo(() => {
+    if (activeCategory === 'All') return products
+    return products.filter(p => (p as any).collection?.title === activeCategory)
+  }, [products, activeCategory])
+
+  if (loading) return (
+    <div className="min-h-screen flex items-center justify-center bg-background">
+      <div className="text-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4" />
+        <p className="text-muted-foreground">Loading menu…</p>
+      </div>
+    </div>
+  )
+
+  if (error) return (
+    <div className="min-h-screen flex items-center justify-center bg-background">
+      <p className="text-destructive">Failed to load menu. Please try again.</p>
+    </div>
+  )
+
+  return (
+    <main className="min-h-screen bg-background">
+      <div className="container mx-auto px-4 py-10">
+        <div className="flex items-center justify-between mb-8">
+          <h1 className="text-3xl font-bold text-foreground">Our Menu</h1>
+        </div>
+
+        {/* Category tabs */}
+        <div className="flex gap-2 overflow-x-auto pb-2 mb-8 scrollbar-hide">
+          {categories.map(cat => (
+            <button
+              key={cat}
+              onClick={() => setActiveCategory(cat)}
+              className={`flex-none px-5 py-2 rounded-full text-sm font-semibold transition-colors ${activeCategory === cat ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:bg-muted/80'}`}
+            >
+              {cat}
+            </button>
+          ))}
+        </div>
+
+        {displayed.length === 0 ? (
+          <div className="text-center py-20">
+            <Utensils className="h-16 w-16 mx-auto mb-4 text-muted-foreground/40" />
+            <p className="text-muted-foreground text-lg">No dishes in this category yet.</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-5">
+            {displayed.map((dish) => {
+              const variant = dish.variants?.[0]
+              const price = variant?.prices?.[0]
+              const imageUrl = dish.thumbnail || dish.images?.[0]?.url
+              return (
+                <div key={dish.id} className="bg-card rounded-xl overflow-hidden border border-border hover:shadow-lg transition-all duration-300 flex flex-col group">
+                  <Link href={`/menu/${dish.id}`} className="block overflow-hidden">
+                    {imageUrl ? (
+                      <div className="relative h-48 overflow-hidden bg-muted">
+                        <Image src={imageUrl} alt={dish.title || 'Dish'} fill sizes="(max-width: 640px) 100vw, (max-width: 1280px) 50vw, 33vw" className="object-cover group-hover:scale-105 transition-transform duration-500" />
+                      </div>
+                    ) : (
+                      <div className="h-48 bg-muted flex items-center justify-center">
+                        <Utensils className="h-12 w-12 text-muted-foreground/30" />
+                      </div>
+                    )}
+                  </Link>
+                  <div className="p-4 flex flex-col flex-1">
+                    {(dish as any).collection?.title && (
+                      <span className="text-xs font-medium text-primary mb-1">{(dish as any).collection.title}</span>
+                    )}
+                    <Link href={`/menu/${dish.id}`}>
+                      <h2 className="font-semibold text-foreground mb-1 line-clamp-2 hover:text-primary transition-colors">{dish.title}</h2>
+                    </Link>
+                    {dish.description && (
+                      <p className="text-sm text-muted-foreground mb-3 line-clamp-2 flex-1">{dish.description}</p>
+                    )}
+                    {price && (
+                      <p className="text-lg font-bold text-primary mb-3">{formatPrice(price.amount, price.currency_code)}</p>
+                    )}
+                    <button
+                      onClick={() => { if (!variant?.id) return; addToCart({ variantId: variant.id, productId: dish.id, title: dish.title, variant_title: variant.title ?? '', unit_price: variant.prices?.[0]?.amount ?? 0, quantity: 1, thumbnail: dish.thumbnail ?? null }); window.dispatchEvent(new CustomEvent('cart-drawer-open')) }}
+                      disabled={!variant?.id}
+                      className="w-full bg-primary text-primary-foreground py-2 px-4 rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      Add to Order
+                    </button>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </main>
+  )
+}