+
{product.category}{product.collection}
-
{product.name}
+
{product.name}
{product.shortDescription}
-
{formatMoney(product.price, product.currency)}
+
{formatMoney(product.price, product.currency)}
-
+
);
}
diff --git a/workloads/ecommerce/components/product/product-carousel.tsx b/workloads/ecommerce/components/product/product-carousel.tsx
index 1ee055e..f028410 100644
--- a/workloads/ecommerce/components/product/product-carousel.tsx
+++ b/workloads/ecommerce/components/product/product-carousel.tsx
@@ -1,9 +1,48 @@
"use client";
-import { motion } from "motion/react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
import { ProductCard } from "@/components/product/product-card";
import type { Product } from "@/lib/headless/types";
export function ProductCarousel({ products }: { products: Product[] }) {
- return
{products.map((product, index) => )};
+ const scroller = useRef
(null);
+ const [canPrevious, setCanPrevious] = useState(false);
+ const [canNext, setCanNext] = useState(products.length > 1);
+
+ const updateControls = useCallback(() => {
+ const node = scroller.current;
+ if (!node) return;
+ setCanPrevious(node.scrollLeft > 8);
+ setCanNext(node.scrollLeft + node.clientWidth < node.scrollWidth - 8);
+ }, []);
+
+ useEffect(() => {
+ const node = scroller.current;
+ if (!node) return;
+ updateControls();
+ node.addEventListener("scroll", updateControls, { passive: true });
+ const observer = new ResizeObserver(updateControls);
+ observer.observe(node);
+ return () => {
+ node.removeEventListener("scroll", updateControls);
+ observer.disconnect();
+ };
+ }, [updateControls]);
+
+ const move = (direction: -1 | 1) => {
+ const node = scroller.current;
+ if (!node) return;
+ node.scrollBy({ left: direction * Math.max(280, node.clientWidth * 0.82), behavior: "smooth" });
+ };
+
+ return (
+
+
+
{ if (event.key === "ArrowLeft") move(-1); if (event.key === "ArrowRight") move(1); }} className="flex snap-x snap-mandatory gap-5 overflow-x-auto scroll-smooth pb-5 pr-5 outline-none [overscroll-behavior-inline:contain] [scrollbar-width:none]">
+ {products.map((product, index) =>
)}
+
+
+
{images.map((image) => )}
+
+ {images.map((image) => )}
+
+
+
-
-
setQuery(event.target.value)} placeholder="Busca juguetes, mochilas, personajes…" className="h-[52px] border-white/80 bg-white pl-[52px] pr-12 shadow-xl" />
- {query &&
}
+
+ {products.length === 0 ? (
+
+
Aún no guardas favoritos
Pulsa el corazón de cualquier producto.
+
+ ) : products.map((product) => (
+
+
+
+
+
+
{product.name}
+
{product.category} · {product.collection}
+
+
+ ))}
+