10 lines
811 B
TypeScript
10 lines
811 B
TypeScript
"use client";
|
|
|
|
import { motion } from "motion/react";
|
|
import { ProductCard } from "@/components/product/product-card";
|
|
import type { Product } from "@/lib/headless/types";
|
|
|
|
export function ProductCarousel({ products }: { products: Product[] }) {
|
|
return <motion.div initial="hidden" whileInView="visible" viewport={{ once: true, margin: "-80px" }} variants={{ hidden: {}, visible: { transition: { staggerChildren: 0.07 } } }} className="grid auto-cols-[82%] grid-flow-col gap-5 overflow-x-auto pb-5 pr-5 [scrollbar-width:none] sm:auto-cols-[44%] lg:auto-cols-[28%] xl:auto-cols-[23%]">{products.map((product, index) => <motion.div key={product.id} variants={{ hidden: { opacity: 0, y: 24 }, visible: { opacity: 1, y: 0 } }}><ProductCard product={product} priority={index < 2} /></motion.div>)}</motion.div>;
|
|
}
|