Deploy

src/components/sections/FreshKasiDropsSection.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import { useMedusaProducts, MedusaProduct } from '@/hooks/useMedusaProducts'
+import { useMedusaCart } from '@/hooks/useMedusaCart'
+import Button from '@/components/ui/Button'
+import Badge from '@/components/ui/Badge'
+import { Card, CardContent } from '@/components/ui/Card'
+import Image from 'next/image'
+import Link from 'next/link'
+import { Eye, ShoppingBag } 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)}`
+}
+
+function ProductCard({ product }: { product: MedusaProduct }) {
+  const { addToCart } = useMedusaCart()
+  const variant = product.variants?.[0]
+  const price = variant?.prices?.[0]
+  const isLimited = Math.random() > 0.7
+
+  const handleAddToCart = () => {
+    if (!variant) return
+    addToCart(variant.id, 1)
+    window.dispatchEvent(new CustomEvent('cart-drawer-open'))
+  }
+
+  return (
+    <Card className="relative border-[3px] border-[#18181b] shadow-[4px_4px_0_0_#dc2626] group">
+      <Link href={`/products/${product.id}`} className="block">
+        <div className="relative aspect-square overflow-hidden">
+          {product.thumbnail ? (
+            <Image
+              src={product.thumbnail}
+              alt={product.title}
+              fill
+              sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 25vw"
+              className="object-cover transition-transform duration-500 ease-out group-hover:scale-105"
+            />
+          ) : (
+            <div className="h-full w-full bg-gray-100 flex items-center justify-center">
+              <ShoppingBag className="w-12 h-12 text-gray-400" />
+            </div>
+          )}
+          <div className="absolute inset-0 bg-[#18181b]/0 group-hover:bg-[#18181b]/30 transition-all duration-200 ease-out flex items-center justify-center opacity-0 group-hover:opacity-100">
+            <Eye className="w-8 h-8 text-white" />
+          </div>
+          {isLimited && (
+            <Badge
+              variant="accent"
+              className="absolute top-2 left-2 uppercase text-xs font-bold bg-[#dc2626] text-white border-0"
+            >
+              Limited stock
+            </Badge>
+          )}
+        </div>
+      </Link>
+      <CardContent className="p-4">
+        <h3 className="font-bold uppercase text-sm text-[#18181b] truncate">
+          {product.title}
+        </h3>
+        {price && (
+          <p className="text-[#dc2626] font-black text-lg mt-1">
+            {formatPrice(price.amount, price.currency_code)}
+          </p>
+        )}
+        <Button
+          variant="default"
+          size="sm"
+          className="w-full mt-3 uppercase bg-[#d4af37] hover:bg-[#b8962e] text-[#18181b] font-bold"
+          onClick={handleAddToCart}
+        >
+          Bamba i-drop
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default function FreshKasiDropsSection() {
+  const { products, isLoading } = useMedusaProducts(12)
+  if (isLoading) {
+    return (
+      <div className="flex justify-center py-16">
+        <div className="w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin" />
+      </div>
+    )
+  }
+  if (products.length === 0) return null
+
+  return (
+    <section
+      id="fresh-kasi-drops"
+      data-vula-section="fresh-kasi-drops"
+      className="bg-[#ffffff] py-16 px-4"
+    >
+      <div className="max-w-6xl mx-auto">
+        <div className="mb-10 border-b-[3px] border-[#d4af37] pb-4">
+          <span className="bg-[#dc2626] text-white font-black uppercase text-sm px-4 py-1 inline-block mb-2">
+            Fresh off the press
+          </span>
+          <h2 className="text-4xl font-black uppercase tracking-tighter text-[#18181b]">
+            Fresh Kasi Drops
+          </h2>
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+          {products.map((product) => (
+            <ProductCard key={product.id} product={product} />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}