crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-09-07 16:30:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Optimizes image sizes (#1140)

Browse Source
This commit is contained in:
Michael Novotny
2023-08-02 21:07:35 -05:00
committed by GitHub
parent 0f700e2d07
commit 9c813577e1
6 changed files with 69 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/carousel.tsx
View File

@@ -10,27 +10,28 @@ export async function Carousel() {
return (
<div className=" w-full overflow-x-auto pb-6 pt-1">
<div className="flex animate-carousel gap-4">
<ul className="flex animate-carousel gap-4">
{[...products, ...products].map((product, i) => (
<Link
<li
key={`${product.handle}${i}`}
href={`/product/${product.handle}`}
className="h-[30vh] w-2/3 flex-none md:w-1/3"
className="relative aspect-square h-[30vh] max-h-[275px] w-2/3 max-w-[475px] 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>
<Link href={`/product/${product.handle}`} className="relative h-full w-full">
<GridTileImage
alt={product.title}
label={{
title: product.title,
amount: product.priceRange.maxVariantPrice.amount,
currencyCode: product.priceRange.maxVariantPrice.currencyCode
}}
src={product.featuredImage?.url}
fill
sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33vw, 50vw"
/>
</Link>
</li>
))}
</div>
</ul>
</div>
);
}