crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-15 14:06:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adds back carousel animation

Browse Source
This commit is contained in:
Michael Novotny 2023-07-15 11:17:44 -05:00
parent 1381783490
commit e21297ceb9
No known key found for this signature in database
1 changed files with 23 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
components/carousel.tsx
View File

@ -9,27 +9,29 @@ export async function Carousel() {
if (!products?.length) return null;
return (
<div className="flex w-full gap-4 overflow-x-auto pb-6 pt-1">
{[...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}
labels={{
isSmall: true,
title: product.title,
amount: product.priceRange.maxVariantPrice.amount,
currencyCode: product.priceRange.maxVariantPrice.currencyCode
}}
src={product.featuredImage?.url}
width={600}
height={600}
/>
</Link>
))}
<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}
labels={{
isSmall: true,
title: product.title,
amount: product.priceRange.maxVariantPrice.amount,
currencyCode: product.priceRange.maxVariantPrice.currencyCode
}}
src={product.featuredImage?.url}
width={600}
height={600}
/>
</Link>
))}
</div>
</div>
);
}