Updates recommended products to use ProductGridItems component (#975)

app/product/[handle]/page.tsx

@@ -1,11 +1,10 @@
 import type { Metadata } from 'next';
-import Link from 'next/link';
 import { notFound } from 'next/navigation';
 import { Suspense } from 'react';
 
 import Grid from 'components/grid';
-import { GridTileImage } from 'components/grid/tile';
 import Footer from 'components/layout/footer';
+import ProductGridItems from 'components/layout/product-grid-items';
 import { AddToCart } from 'components/product/add-to-cart';
 import { Gallery } from 'components/product/gallery';
 import { VariantSelector } from 'components/product/variant-selector';
@@ -106,24 +105,8 @@ async function RelatedProducts({ id }: { id: string }) {
     <div className="px-4 py-8">
       <div className="mb-4 text-3xl font-bold">Related Products</div>
       <Grid className="grid-cols-2 lg:grid-cols-5">
-        {relatedProducts.map((product) => {
+        {/* @ts-expect-error Server Component */}
-          return (
+        <ProductGridItems products={relatedProducts} />
-            <Grid.Item key={product.id} className="animate-fadeIn">
-              <Link
-                aria-label={product.title}
-                className="border-gay-300 group relative block aspect-square overflow-hidden border bg-gray-50"
-                href={`/product/${product.handle}`}
-              >
-                <GridTileImage
-                  alt={product.title}
-                  src={product.featuredImage.url}
-                  width={600}
-                  height={600}
-                />
-              </Link>
-            </Grid.Item>
-          );
-        })}
       </Grid>
     </div>
   );

app/search/[collection]/page.tsx

@@ -2,7 +2,8 @@ import { getCollection, getCollectionProducts } from 'lib/shopify';
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
-import SearchResults from 'components/layout/search/results';
+import Grid from 'components/grid';
+import ProductGridItems from 'components/layout/product-grid-items';
 
 export const runtime = 'edge';
 
@@ -36,11 +37,14 @@ export default async function CategoryPage({ params }: { params: { collection: s
 
   return (
     <section>
-      {/* @ts-expect-error Server Component */}
-      <SearchResults products={products} />
       {products.length === 0 ? (
         <p className="py-3 text-lg">{`No products found in this collection`}</p>
-      ) : null}
+      ) : (
+        <Grid className="grid-cols-2 lg:grid-cols-3">
+          {/* @ts-expect-error Server Component */}
+          <ProductGridItems products={products} />
+        </Grid>
+      )}
     </section>
   );
 }

app/search/page.tsx

@@ -1,4 +1,5 @@
-import SearchResults from 'components/layout/search/results';
+import Grid from 'components/grid';
+import ProductGridItems from 'components/layout/product-grid-items';
 import { defaultSort, sorting } from 'lib/constants';
 import { getProducts } from 'lib/shopify';
 
@@ -22,20 +23,20 @@ export default async function SearchPage({
 
   return (
     <>
-      {searchValue &&
+      {searchValue ? (
-        (products.length > 0 ? (
+        <p>
-          <p>
+          {products.length === 0
-            {`Showing ${products.length} ${resultsText} for `}
+            ? 'There are no products that match '
-            <span className="font-bold">&quot;{searchValue}&quot;</span>
+            : `Showing ${products.length} ${resultsText} for `}
-          </p>
+          <span className="font-bold">&quot;{searchValue}&quot;</span>
-        ) : (
+        </p>
-          <p>
+      ) : null}
-            {'There are no products that match '}
+      {products.length > 0 ? (
-            <span className="font-bold">&quot;{searchValue}&quot;</span>
+        <Grid className="grid-cols-2 lg:grid-cols-3">
-          </p>
+          {/* @ts-expect-error Server Component */}
-        ))}
+          <ProductGridItems products={products} />
-      {/* @ts-expect-error Server Component */}
+        </Grid>
-      <SearchResults products={products} />
+      ) : null}
     </>
   );
 }

components/layout/product-grid-items.tsx

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

components/layout/search/results.tsx

@@ -1,33 +0,0 @@
-import Grid from 'components/grid';
-import { GridTileImage } from 'components/grid/tile';
-import { Product } from 'lib/shopify/types';
-import Link from 'next/link';
-
-export default async function SearchResults({ products }: { products: Product[] }) {
-  return (
-    <>
-      {products.length ? (
-        <Grid className="grid-cols-2 lg:grid-cols-3">
-          {products.map((product) => (
-            <Grid.Item key={product.handle} className="animate-fadeIn">
-              <Link className="h-full w-full" href={`/product/${product.handle}`}>
-                <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>
-            </Grid.Item>
-          ))}
-        </Grid>
-      ) : null}
-    </>
-  );
-}