Deploy

src/components/sections/BrandCarouselSection.tsx

@@ -0,0 +1,48 @@
+'use client'
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import Image from 'next/image'
+
+interface MedusaCollection { id: string; title: string; handle: string; metadata?: { image?: string } }
+
+export default function BrandCarouselSection() {
+  const [collections, setCollections] = useState<MedusaCollection[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetch('/api/medusa/store/collections?limit=20')
+      .then(r => r.ok ? r.json() : Promise.reject())
+      .then(d => { setCollections(d.collections ?? []); setLoading(false) })
+      .catch(() => setLoading(false))
+  }, [])
+
+  if (loading || collections.length === 0) return null
+
+  return (
+    <section className="py-10 px-4">
+      <div className="max-w-7xl mx-auto">
+        <h2 className="text-xl font-bold mb-5">Shop by Collection</h2>
+        <div className="flex gap-4 overflow-x-auto pb-3 scrollbar-hide snap-x snap-mandatory">
+          {collections.map(col => (
+            <Link
+              key={col.id}
+              href={`/products?collection=${col.handle}`}
+              className="flex-none snap-start w-36 group"
+            >
+              <div className="relative h-36 w-36 rounded-2xl overflow-hidden bg-muted mb-2 group-hover:shadow-md transition-shadow">
+                {col.metadata?.image ? (
+                  <Image src={col.metadata.image} alt={col.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-3xl font-bold text-primary/30 uppercase">
+                    {col.title.slice(0, 2)}
+                  </div>
+                )}
+              </div>
+              <p className="text-xs font-medium text-center line-clamp-2 group-hover:text-primary transition-colors">{col.title}</p>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}