4
0
forked from crowetic/commerce
commerce/components/carousel.tsx
2023-07-24 19:40:29 -07:00

37 lines
1.2 KiB
TypeScript

import { getCollectionProducts } from 'lib/shopify';
import Link from 'next/link';
import { GridTileImage } from './grid/tile';
export async function Carousel() {
// Collections that start with `hidden-*` are hidden from the search page.
const products = await getCollectionProducts({ collection: 'hidden-homepage-carousel' });
if (!products?.length) return null;
return (
<div className=" w-full overflow-x-auto pb-6 pt-1">
<div className="flex animate-carousel gap-4">
{[...products, ...products].map((product, i) => (
<Link
key={`${product.handle}${i}`}
href={`/product/${product.handle}`}
className="h-[30vh] w-2/3 flex-none md:w-1/3"
>
<GridTileImage
alt={product.title}
label={{
title: product.title,
amount: product.priceRange.maxVariantPrice.amount,
currencyCode: product.priceRange.maxVariantPrice.currencyCode
}}
src={product.featuredImage?.url}
width={600}
height={600}
/>
</Link>
))}
</div>
</div>
);
}