diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx index 487ada592..fa57e811a 100644 --- a/app/product/[handle]/page.tsx +++ b/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 }) {
Related Products
- {relatedProducts.map((product) => { - return ( - - - - - - ); - })} + {/* @ts-expect-error Server Component */} +
); diff --git a/app/search/[collection]/page.tsx b/app/search/[collection]/page.tsx index 62ab41090..96740f394 100644 --- a/app/search/[collection]/page.tsx +++ b/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 (
- {/* @ts-expect-error Server Component */} - {products.length === 0 ? (

{`No products found in this collection`}

- ) : null} + ) : ( + + {/* @ts-expect-error Server Component */} + + + )}
); } diff --git a/app/search/page.tsx b/app/search/page.tsx index 1a5cdaf16..71cab5211 100644 --- a/app/search/page.tsx +++ b/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 && - (products.length > 0 ? ( -

- {`Showing ${products.length} ${resultsText} for `} - "{searchValue}" -

- ) : ( -

- {'There are no products that match '} - "{searchValue}" -

- ))} - {/* @ts-expect-error Server Component */} - + {searchValue ? ( +

+ {products.length === 0 + ? 'There are no products that match ' + : `Showing ${products.length} ${resultsText} for `} + "{searchValue}" +

+ ) : null} + {products.length > 0 ? ( + + {/* @ts-expect-error Server Component */} + + + ) : null} ); } diff --git a/components/layout/product-grid-items.tsx b/components/layout/product-grid-items.tsx new file mode 100644 index 000000000..337800240 --- /dev/null +++ b/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) => ( + + + + + + ))} + + ); +} diff --git a/components/layout/search/results.tsx b/components/layout/search/results.tsx deleted file mode 100644 index de67b43b2..000000000 --- a/components/layout/search/results.tsx +++ /dev/null @@ -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 ? ( - - {products.map((product) => ( - - - - - - ))} - - ) : null} - - ); -}