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}
- >
- );
-}