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

use tile in carousel

Browse Source
This commit is contained in:
StephDietz 2023-07-14 09:34:53 -05:00
parent 01f02952fd
commit 3832377c88
1 changed files with 12 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
components/carousel.tsx
View File

@ -1,7 +1,6 @@
import { getCollectionProducts } from 'lib/shopify'; import { getCollectionProducts } from 'lib/shopify';
import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
import Label from './label'; import { GridTileImage } from './grid/tile';
export async function Carousel() { export async function Carousel() {
// Collections that start with `hidden-*` are hidden from the search page. // Collections that start with `hidden-*` are hidden from the search page.
@ -18,19 +17,17 @@ export async function Carousel() {
href={`/product/${product.handle}`} href={`/product/${product.handle}`}
className="relative h-[30vh] w-2/3 flex-none rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black md:w-1/3" className="relative h-[30vh] w-2/3 flex-none rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black md:w-1/3"
> >
{product.featuredImage ? ( <GridTileImage
<Image
alt={product.title} alt={product.title}
className="h-full object-contain" labels={{
fill isSmall: true,
sizes="33vw" title: product.title,
src={product.featuredImage.url} amount: product.priceRange.maxVariantPrice.amount,
/> currencyCode: product.priceRange.maxVariantPrice.currencyCode
) : null} }}
<Label src={product.featuredImage?.url}
title={product.title} width={600}
amount={product.priceRange.maxVariantPrice.amount} height={600}
currencyCode={product.priceRange.maxVariantPrice.currencyCode}
/> />
</Link> </Link>
))} ))}