2023-04-20 11:27:18 -05:00
|
|
|
import Grid from 'components/grid';
|
|
|
|
import { GridTileImage } from 'components/grid/tile';
|
|
|
|
import { Product } from 'lib/shopify/types';
|
|
|
|
import Link from 'next/link';
|
|
|
|
|
2023-04-20 13:54:04 -05:00
|
|
|
export default function ProductGridItems({ products }: { products: Product[] }) {
|
2023-04-20 11:27:18 -05:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
{products.map((product) => (
|
|
|
|
<Grid.Item key={product.handle} className="animate-fadeIn">
|
2024-07-24 14:05:34 -05:00
|
|
|
<Link
|
|
|
|
className="relative inline-block h-full w-full"
|
|
|
|
href={`/product/${product.handle}`}
|
|
|
|
prefetch={true}
|
|
|
|
>
|
2023-04-20 11:27:18 -05:00
|
|
|
<GridTileImage
|
|
|
|
alt={product.title}
|
2023-07-24 21:40:29 -05:00
|
|
|
label={{
|
2023-04-20 11:27:18 -05:00
|
|
|
title: product.title,
|
|
|
|
amount: product.priceRange.maxVariantPrice.amount,
|
|
|
|
currencyCode: product.priceRange.maxVariantPrice.currencyCode
|
|
|
|
}}
|
2023-04-26 16:26:52 +02:00
|
|
|
src={product.featuredImage?.url}
|
2023-08-02 21:07:35 -05:00
|
|
|
fill
|
|
|
|
sizes="(min-width: 768px) 33vw, (min-width: 640px) 50vw, 100vw"
|
2023-04-20 11:27:18 -05:00
|
|
|
/>
|
|
|
|
</Link>
|
|
|
|
</Grid.Item>
|
|
|
|
))}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|