Deploy

src/components/sections/JustDroppedSection.tsx

@@ -0,0 +1,107 @@
+'use client'
+
+import { useProducts } from "@/hooks/useProducts"
+import { useVulaCart } from "@/hooks/useVulaCart"
+import Image from "next/image"
+import Link from "next/link"
+import Button from "@/components/ui/Button"
+import { ShoppingBag, Star } from 'lucide-react'
+
+export default function JustDroppedSection() {
+  const { products, isLoading, error } = useProducts(8)
+  const { addToCart } = useVulaCart()
+
+  const formatPrice = (amount: number) => `R${amount.toFixed(2)}`
+
+  const handleAddToCart = (product: any) => {
+    if (!product.variants?.length) return
+    const variant = product.variants?.[0]
+    addToCart({
+      variantId: variant.id,
+      productId: product.id,
+      title: product.title,
+      variant_title: variant.title,
+      unit_price: variant.price_amount,
+      quantity: 1,
+      thumbnail: product.thumbnail ?? null,
+    })
+    window.dispatchEvent(new CustomEvent("cart-drawer-open"))
+  }
+
+  if (isLoading) {
+    return (
+      <section data-vula-section="justdropped" id="just-dropped" className="py-16 bg-[#F0F8FF]">
+        <div className="max-w-7xl mx-auto px-4">
+          <h2 className="text-3xl font-bold text-[#1A2B3C] text-center mb-12 uppercase tracking-wide">
+            Just Dropped
+          </h2>
+          <div className="flex justify-center">
+            <Star className="w-8 h-8 animate-spin text-[#0077BE]" />
+          </div>
+        </div>
+      </section>
+    )
+  }
+
+  if (error) {
+    return (
+      <section id="just-dropped" className="py-16 bg-[#F0F8FF]">
+        <div className="max-w-7xl mx-auto px-4 text-center">
+          <p className="text-red-500">{error}</p>
+        </div>
+      </section>
+    )
+  }
+
+  return (
+    <section id="just-dropped" className="py-16 bg-[#F0F8FF]">
+      <div className="max-w-7xl mx-auto px-4">
+        <h2 className="text-3xl font-bold text-[#1A2B3C] text-center mb-12 uppercase tracking-wide">
+          Just Dropped
+        </h2>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {products?.map((product: any) => (
+            <div
+              key={product.id}
+              className="rounded-xl overflow-hidden bg-white shadow-md hover:shadow-lg transition-shadow duration-200"
+            >
+              <Link href={`/products/${product.id}`} className="block relative h-48 w-full">
+                {product.thumbnail ? (
+                  <Image
+                    src={product.thumbnail}
+                    alt={product.title}
+                    fill
+                    className="object-cover hover:scale-105 transition-transform duration-500 ease-out"
+                    sizes="(max-width: 768px) 100vw, 25vw"
+                  />
+                ) : (
+                  <div className="h-full w-full bg-gray-200 flex items-center justify-center">
+                    <ShoppingBag className="w-8 h-8 text-gray-400" />
+                  </div>
+                )}
+              </Link>
+              <div className="p-5">
+                <h3 className="font-semibold text-[#1A2B3C] truncate">
+                  <Link href={`/products/${product.id}`} className="hover:text-[#0077BE]">
+                    {product.title}
+                  </Link>
+                </h3>
+                <p className="text-[#00A8CC] font-bold mt-1">
+                  {product.price_amount != null ? formatPrice(product.price_amount) : "R0.00"}
+                </p>
+                <Button
+                  className="mt-3 w-full bg-[#0077BE] text-white hover:bg-[#005f9a] transition-all duration-200"
+                  size="default"
+                  onClick={() => handleAddToCart(product)}
+                >
+                  <ShoppingBag className="w-4 h-4 mr-2" />
+                  Quick Add
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}