crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-15 22:16:58 +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; if (!products?.length) return null;
return ( return (
<div className="flex w-full gap-4 overflow-x-auto pb-6 pt-1"> <div className=" w-full overflow-x-auto pb-6 pt-1">
{[...products, ...products].map((product, i) => ( <div className="flex animate-carousel gap-4">
<Link {[...products, ...products].map((product, i) => (
key={`${product.handle}${i}`} <Link
href={`/product/${product.handle}`} key={`${product.handle}${i}`}
className="h-[30vh] w-2/3 flex-none md:w-1/3" href={`/product/${product.handle}`}
> className="h-[30vh] w-2/3 flex-none md:w-1/3"
<GridTileImage >
alt={product.title} <GridTileImage
labels={{ alt={product.title}
isSmall: true, labels={{
title: product.title, isSmall: true,
amount: product.priceRange.maxVariantPrice.amount, title: product.title,
currencyCode: product.priceRange.maxVariantPrice.currencyCode amount: product.priceRange.maxVariantPrice.amount,
}} currencyCode: product.priceRange.maxVariantPrice.currencyCode
src={product.featuredImage?.url} }}
width={600} src={product.featuredImage?.url}
height={600} width={600}
/> height={600}
</Link> />
))} </Link>
))}
</div>
</div> </div>
); );
} }