Deploy

src/components/sections/NewArrivalsSection.tsx

@@ -0,0 +1,100 @@
+'use client'
+
+import Link from "next/link"
+import { useMedusaProducts } from "@/hooks/useMedusaProducts"
+import { Card, CardContent } from "@/components/ui/Card"
+
+const CURRENCY_SYMBOLS: Record<string, string> = {
+  zar: "R",
+  usd: "$",
+  eur: "\u20AC",
+  gbp: "\u00A3",
+}
+
+const formatPrice = (amount: number, code?: string) => {
+  const sym = CURRENCY_SYMBOLS[(code ?? "").toLowerCase()] ?? (code?.toUpperCase() ?? "")
+  return `${sym}${(amount / 100).toFixed(2)}`
+}
+
+export default function NewArrivalsSection() {
+  const { products, isLoading } = useMedusaProducts(4)
+
+  return (
+    <section data-vula-section="newarrivals" id="new-arrivals" className="bg-[#1a1a1a] py-20">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="mb-12 text-center">
+          <h2 className="text-3xl font-bold text-[#F5F5F5] md:text-4xl">
+            New Arrivals
+          </h2>
+          <p className="mt-2 text-[#F5F5F5]/60">
+            Fresh drops straight from production
+          </p>
+        </div>
+
+        {isLoading && (
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+            {[...Array(4)].map((_, i) => (
+              <div
+                key={i}
+                className="animate-pulse rounded-xl bg-white/10"
+              >
+                <div className="h-48 w-full rounded-t-xl bg-white/10" />
+                <div className="space-y-2 p-5">
+                  <div className="h-4 w-3/4 rounded bg-white/10" />
+                  <div className="h-4 w-1/2 rounded bg-white/10" />
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {!isLoading && (
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+            {products?.slice(0, 4).map((product) => {
+              const price = product.variants?.[0]?.prices?.[0]
+              return (
+                <Link
+                  key={product.id}
+                  href={`/products/${product.id}`}
+                  className="group block"
+                >
+                  <Card className="overflow-hidden bg-white transition-all duration-200 ease-out hover:-translate-y-0.5 hover:shadow-lg">
+                    <div className="aspect-[4/3] overflow-hidden">
+                      {product.thumbnail ? (
+                        <img
+                          src={product.thumbnail}
+                          alt={product.title}
+                          className="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105"
+                        />
+                      ) : (
+                        <div className="flex h-full w-full items-center justify-center bg-gray-200">
+                          <span className="text-4xl text-gray-400">T</span>
+                        </div>
+                      )}
+                    </div>
+                    <CardContent className="p-5">
+                      <h3 className="text-sm font-semibold text-[#111827] truncate">
+                        {product.title}
+                      </h3>
+                      {price && (
+                        <p className="mt-1 text-sm font-medium text-[#4A9EFF]">
+                          {formatPrice(price.amount, price.currency_code)}
+                        </p>
+                      )}
+                    </CardContent>
+                  </Card>
+                </Link>
+              )
+            })}
+          </div>
+        )}
+
+        <div className="mt-12 text-center">
+          <Link href="/products" className="inline-block rounded-lg border-2 border-[#4A9EFF] px-8 py-3 text-base font-semibold text-[#4A9EFF] transition-all duration-200 ease-out hover:bg-[#4A9EFF] hover:text-white">
+            Shop All New Drops
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}