4
0
forked from crowetic/commerce
commerce/components/layout/product-grid-items.tsx
2023-07-24 19:40:29 -07:00

29 lines
924 B
TypeScript

import Grid from 'components/grid';
import { GridTileImage } from 'components/grid/tile';
import { Product } from 'lib/shopify/types';
import Link from 'next/link';
export default function ProductGridItems({ products }: { products: Product[] }) {
return (
<>
{products.map((product) => (
<Grid.Item key={product.handle} className="animate-fadeIn">
<Link className="inline-block h-full w-full" href={`/product/${product.handle}`}>
<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>
</Grid.Item>
))}
</>
);
}