Deploy

2026-07-31 18:44:29 +00:00
parent 7e8517ff3e
commit 79df249a57
1 changed files with 78 additions and 0 deletions
@@ -0,0 +1,78 @@
+'use client'
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import Image from 'next/image'
+import { ShoppingBag } from 'lucide-react'
+import { useVulaCart } from '@/hooks/useVulaCart'
+
+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)}`
+}
+
+interface Variant { id: string; prices: Array<{ amount: number; currency_code: string }> }
+interface Product { id: string; title: string; thumbnail: string | null; variants: Variant[]; collection?: { id: string } }
+
+export default function YouMayAlsoLike({ currentProductId, collectionId }: { currentProductId: string; collectionId?: string }) {
+  const [products, setProducts] = useState<Product[]>([])
+  const { addToCart } = useVulaCart()
+
+  useEffect(() => {
+    const params = new URLSearchParams({ limit: '8' })
+    if (collectionId) params.set('collection_id[]', collectionId)
+    fetch(`/api/products?${params}`)
+      .then(r => r.ok ? r.json() : null)
+      .then(data => {
+        if (!data?.products) return
+        setProducts(data.products.filter((p: Product) => p.id !== currentProductId).slice(0, 4))
+      })
+      .catch(() => {})
+  }, [currentProductId, collectionId])
+
+  if (products.length === 0) return null
+
+  return (
+    <section className="mt-20 pt-12 border-t border-border">
+      <h2 className="text-2xl font-bold text-foreground mb-8">You May Also Like</h2>
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        {products.map(product => {
+          const variant = product.variants?.[0]
+          const price = variant?.prices?.[0]
+          return (
+            <div key={product.id} className="group bg-card rounded-xl overflow-hidden border border-border hover:shadow-md transition-all">
+              <Link href={`/products/${product.id}`} className="block overflow-hidden">
+                <div className="relative aspect-square bg-muted">
+                  {product.thumbnail ? (
+                    <Image src={product.thumbnail} alt={product.title || ''} fill sizes="(max-width: 640px) 50vw, 25vw" className="object-cover group-hover:scale-105 transition-transform duration-300" />
+                  ) : (
+                    <div className="w-full h-full flex items-center justify-center">
+                      <ShoppingBag className="h-8 w-8 text-muted-foreground/30" />
+                    </div>
+                  )}
+                </div>
+              </Link>
+              <div className="p-3">
+                <Link href={`/products/${product.id}`}>
+                  <p className="text-sm font-medium text-foreground line-clamp-2 mb-1 hover:text-primary transition-colors">{product.title}</p>
+                </Link>
+                {price && (
+                  <p className="text-sm font-bold text-primary mb-2">
+                    {formatPrice(price.amount, price.currency_code)}
+                  </p>
+                )}
+                <button
+                  onClick={() => { if (!variant?.id) return; addToCart({ variantId: variant.id, productId: product.id, title: product.title, variant_title: '', unit_price: price?.amount ?? 0, quantity: 1, thumbnail: product.thumbnail ?? null }); window.dispatchEvent(new CustomEvent('cart-drawer-open')) }}
+                  disabled={!variant?.id}
+                  className="w-full text-xs bg-primary/10 text-primary hover:bg-primary hover:text-primary-foreground py-1.5 rounded-lg transition-colors font-medium disabled:opacity-40"
+                >
+                  Add to Cart
+                </button>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </section>
+  )
+}