Deploy

src/components/shop/MostPopular.tsx

@@ -0,0 +1,77 @@
+'use client'
+import { useMedusaProducts } from '@/hooks/useMedusaProducts'
+import { useMedusaCart } from '@/hooks/useMedusaCart'
+import Link from 'next/link'
+import Image from 'next/image'
+import { ShoppingBag, TrendingUp } 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)}`
+}
+
+export default function MostPopular() {
+  const { products, loading } = useMedusaProducts(8)
+  const { addToCart } = useMedusaCart()
+  const featured = products.slice(0, 4)
+
+  if (loading) return (
+    <div className="py-12 flex justify-center">
+      <div className="w-8 h-8 rounded-full border-2 border-primary border-t-transparent animate-spin" />
+    </div>
+  )
+  if (featured.length === 0) return null
+
+  return (
+    <section className="py-10">
+      <div className="flex items-center gap-2 mb-6">
+        <TrendingUp className="h-5 w-5 text-primary" />
+        <h2 className="text-xl font-bold text-foreground">Popular Picks</h2>
+      </div>
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        {featured.map((product, idx) => {
+          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 relative">
+              {idx < 2 && (
+                <span className="absolute top-2 left-2 z-10 bg-primary text-primary-foreground text-xs font-semibold px-2 py-0.5 rounded-full">
+                  Best Seller
+                </span>
+              )}
+              <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(variant.id, 1); 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>
+  )
+}