Vula Builder
93 lines
4.0 KiB
TypeScript
93 lines
4.0 KiB
TypeScript
'use client'
|
|
|
|
import { useMedusaProducts } from '@/hooks/useMedusaProducts'
|
|
import { useMedusaCart } from '@/hooks/useMedusaCart'
|
|
import Link from 'next/link'
|
|
import Image from 'next/image'
|
|
import Button from '@/components/ui/Button'
|
|
import Badge from '@/components/ui/Badge'
|
|
import { Card, CardContent, CardFooter } from '@/components/ui/Card'
|
|
|
|
export default function MzansiFeaturedSection() {
|
|
const { products, isLoading } = useMedusaProducts(8)
|
|
const { addToCart } = useMedusaCart()
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div data-vula-section="mzansifeatured" 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
|
|
|
|
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 handleAddToCart = (variantId: string) => {
|
|
addToCart(variantId, 1)
|
|
window.dispatchEvent(new CustomEvent('cart-drawer-open'))
|
|
}
|
|
|
|
return (
|
|
<section id="featured-products" className="py-20 bg-white">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-14">
|
|
<h2 className="font-['Archivo_Black'] uppercase text-4xl lg:text-5xl text-[#18181b]">
|
|
MZANSI FEATURED
|
|
</h2>
|
|
<p className="mt-3 text-lg text-[#101418]/70 uppercase tracking-wide">
|
|
8 exclusive drops — limited stock, serious style
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
{products.map((product) => {
|
|
const variant = product.variants?.[0]
|
|
const price = variant?.prices?.[0]
|
|
const lowestPrice = price ? formatPrice(price.amount, price.currency_code) : '—'
|
|
|
|
return (
|
|
<Card key={product.id} className="group border-2 border-[#18181b] rounded-none shadow-[6px_6px_0_0_#18181b] hover:shadow-[8px_8px_0_0_#dc2626] transition-all duration-200 ease-out cursor-pointer">
|
|
<Link href={`/products/${product.id}`} className="block">
|
|
<div className="relative aspect-square overflow-hidden">
|
|
<Image
|
|
src={product.thumbnail ?? '/placeholder-product.svg'}
|
|
alt={product.title}
|
|
fill
|
|
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
|
|
className="object-cover transition-transform duration-500 ease-out group-hover:scale-105"
|
|
/>
|
|
<div className="absolute top-2 left-2 z-10">
|
|
<Badge variant="accent" size="sm" className="bg-[#dc2626] text-white border-0 uppercase text-xs">
|
|
Limited Drop
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
<CardContent className="p-4">
|
|
<h3 className="font-bold text-lg uppercase text-[#18181b]">{product.title}</h3>
|
|
<p className="text-2xl font-extrabold text-[#dc2626] mt-1">{lowestPrice}</p>
|
|
</CardContent>
|
|
<CardFooter className="p-4 pt-0">
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
className="w-full bg-[#18181b] text-white border-2 border-[#18181b] hover:bg-[#dc2626] hover:border-[#dc2626] shadow-[3px_3px_0_0_#d4af37] transition-all duration-200 ease-out"
|
|
onClick={() => variant && handleAddToCart(variant.id)}
|
|
>
|
|
Add to Cart
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
} |