Deploy

src/components/sections/ProductCarouselSection.tsx

@@ -0,0 +1,79 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import { getProductCarousels } from '@/lib/cms'
+
+const VULA_CMS_URL     = process.env.VULA_CMS_URL || 'https://ide.vulai.co.za'
+const VULA_PROJECT_ID  = process.env.VULA_CMS_PROJECT_ID || ''
+
+interface VulaProduct {
+  id: string; title: string; thumbnail: string | null
+  variants?: Array<{ prices?: Array<{ amount: number; currency_code: string }> }>
+}
+
+const CURRENCY_SYMBOLS: Record<string, string> = { zar: 'R', usd: '$', eur: '€', gbp: '£', kes: 'KSh', ngn: '₦', ghs: '₵' }
+const fmt = (amount: number, code?: string) =>
+  `${CURRENCY_SYMBOLS[(code ?? '').toLowerCase()] ?? (code?.toUpperCase() ?? '')}${(amount / 100).toFixed(2)}`
+
+async function fetchProductsByIds(ids: string[]): Promise<VulaProduct[]> {
+  if (!ids.length) return []
+  try {
+    const query = ids.map(id => `id[]=${id}`).join('&')
+    const res = await fetch(
+      `${VULA_CMS_URL}/api/store/${VULA_PROJECT_ID}/products?${query}&limit=${ids.length}`,
+      { next: { revalidate: 300 } }
+    )
+    if (!res.ok) return []
+    const data = await res.json() as { products?: VulaProduct[] }
+    return data.products ?? []
+  } catch { return [] }
+}
+
+export default async function ProductCarouselSection() {
+  const carousels = await getProductCarousels()
+  if (!carousels.length) return null
+
+  const sections = await Promise.all(
+    carousels.map(async c => {
+      const ids   = Array.isArray(c.data.product_ids) ? (c.data.product_ids as string[]) : []
+      const prods = await fetchProductsByIds(ids)
+      return { title: c.data.title as string, products: prods }
+    })
+  )
+
+  return (
+    <>
+      {sections.filter(s => s.products.length > 0).map(section => (
+        <section key={section.title} className="py-8 px-4">
+          <div className="max-w-7xl mx-auto">
+            <h2 className="text-xl font-bold mb-5">{section.title}</h2>
+            <div className="flex gap-4 overflow-x-auto pb-3 scrollbar-hide snap-x snap-mandatory">
+              {section.products.map(product => {
+                const variant = product.variants?.[0]
+                const price   = variant?.prices?.[0]
+                return (
+                  <Link
+                    key={product.id}
+                    href={`/products/${product.id}`}
+                    className="flex-none snap-start w-44 group"
+                  >
+                    <div className="relative h-44 w-44 rounded-xl overflow-hidden bg-muted mb-2 group-hover:shadow-md transition-shadow">
+                      {product.thumbnail ? (
+                        <Image src={product.thumbnail} alt={product.title} fill className="object-cover group-hover:scale-105 transition-transform duration-300" />
+                      ) : (
+                        <div className="w-full h-full flex items-center justify-center text-muted-foreground text-xs">No image</div>
+                      )}
+                    </div>
+                    <p className="text-xs font-medium line-clamp-2 group-hover:text-primary transition-colors mb-1">{product.title}</p>
+                    {price?.amount && (
+                      <p className="text-xs font-bold text-primary">{fmt(price.amount, price.currency_code)}</p>
+                    )}
+                  </Link>
+                )
+              })}
+            </div>
+          </div>
+        </section>
+      ))}
+    </>
+  )
+}