From 3832377c88a7d52cf90729b7816012c29578366a Mon Sep 17 00:00:00 2001
From: StephDietz <steph.dietz@vercel.com>
Date: Fri, 14 Jul 2023 09:34:53 -0500
Subject: [PATCH] use tile in carousel

---
 components/carousel.tsx | 27 ++++++++++++---------------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/components/carousel.tsx b/components/carousel.tsx
index 2a8d2526f..100123166 100644
--- a/components/carousel.tsx
+++ b/components/carousel.tsx
@@ -1,7 +1,6 @@
 import { getCollectionProducts } from 'lib/shopify';
-import Image from 'next/image';
 import Link from 'next/link';
-import Label from './label';
+import { GridTileImage } from './grid/tile';
 
 export async function Carousel() {
   // Collections that start with `hidden-*` are hidden from the search page.
@@ -18,19 +17,17 @@ export async function Carousel() {
             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"
           >
-            {product.featuredImage ? (
-              <Image
-                alt={product.title}
-                className="h-full object-contain"
-                fill
-                sizes="33vw"
-                src={product.featuredImage.url}
-              />
-            ) : null}
-            <Label
-              title={product.title}
-              amount={product.priceRange.maxVariantPrice.amount}
-              currencyCode={product.priceRange.maxVariantPrice.currencyCode}
+            <GridTileImage
+              alt={product.title}
+              labels={{
+                isSmall: true,
+                title: product.title,
+                amount: product.priceRange.maxVariantPrice.amount,
+                currencyCode: product.priceRange.maxVariantPrice.currencyCode
+              }}
+              src={product.featuredImage?.url}
+              width={600}
+              height={600}
             />
           </Link>
         ))}