diff --git a/app/layout.js b/app/layout.js
index 0a6c987eb..1e34aa55b 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -1,7 +1,14 @@
+import { TypesNav } from '/components/home.js';
+
export default function RootLayout({ children }) {
return (
- {children}
+
+
+ {children}
+
);
}
diff --git a/app/page.js b/app/page.js
index 309de48bb..f2dfb5949 100644
--- a/app/page.js
+++ b/app/page.js
@@ -1,107 +1,5 @@
-import Link from 'next/link';
-import Image from 'next/image';
-
-import { getCollectionProducts } from 'lib/shopify';
-
-const formatPrice = ({ amount, currencyCode }) => {
- const USDollar = new Intl.NumberFormat('en-US', {
- style: 'currency',
- currency: currencyCode,
- });
-
- return USDollar.format(amount);
-};
-
-const formatPriceRange = ({ maxVariantPrice, minVariantPrice }) => {
- if (maxVariantPrice.amount == minVariantPrice.amount) {
- return `${formatPrice(maxVariantPrice)}`;
- } else {
- return `${formatPrice(minVariantPrice)} - ${formatPrice(
- maxVariantPrice
- )}`;
- }
-};
-
-const PriceRanges = ({ priceRange, compareAtPriceRange, availableForSale }) => {
- const onSale =
- (compareAtPriceRange?.minVariantPrice?.amount ?? 0) >
- (priceRange?.minVariantPrice?.amount ?? 0) ||
- (compareAtPriceRange?.maxVariantPrice?.amount ?? 0) >
- (priceRange?.maxVariantPrice?.amount ?? 0);
- const isForSale = (priceRange?.maxVariantPrice?.amount ?? 0) > 0;
-
- return (
-
- {availableForSale ? (
- isForSale && (
- <>
- <>
- {onSale && (
-
- {formatPriceRange(compareAtPriceRange)}{' '}
-
- )}
-
- {formatPriceRange(priceRange)}
-
- )
- ) : (
- Sold Out
- )}
-
- );
-};
-
-export async function HomeProduct({ product }) {
- const featuredImage = product?.images?.[0];
- const collections = product?.collections?.nodes;
-
- return (
-
-
- {product?.title}
- {collections && collections.length > 0 && (
- {`(${collections
- ?.map(collection => collection?.title)
- .join(', ')})`}
- )}
-
-
- );
-}
+import { HomeProductsList } from '/components/home.js';
export default async function HomePage() {
- const collection = process.env.HOMEPAGE_COLLECTION;
- const products = await getCollectionProducts({
- collection,
- });
-
- // console.log({ collection, products });
- // const num = 4;
- // console.log({
- // price: products[num].priceRange,
- // compareAt: products[num].compareAtPriceRange,
- // title: products[num].title,
- // });
-
- return (
- <>
- {products.length === 0 ? (
- {`No products found`}
- ) : (
-
- {products?.map(product => (
- -
-
-
- ))}
-
- )}
-
- );
+ return ;
}
diff --git a/app/search/[collection]/page.js b/app/search/[collection]/page.js
new file mode 100644
index 000000000..f03932240
--- /dev/null
+++ b/app/search/[collection]/page.js
@@ -0,0 +1,13 @@
+import { getCollections } from 'lib/shopify';
+
+import { HomeProductsList } from '/components/home.js';
+
+export async function generateStaticParams() {
+ const collections = await getCollections();
+
+ return collections.map(collection => ({ collection: collection.handle }));
+}
+
+export default async function CollectionPage({ params: { collection } }) {
+ return ;
+}
diff --git a/components/home.js b/components/home.js
new file mode 100644
index 000000000..c1ee30c72
--- /dev/null
+++ b/components/home.js
@@ -0,0 +1,128 @@
+import Link from 'next/link';
+import Image from 'next/image';
+
+import { getCollectionProducts, getMenu } from 'lib/shopify';
+
+export const formatPrice = ({ amount, currencyCode }) => {
+ const USDollar = new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: currencyCode,
+ });
+
+ return USDollar.format(amount);
+};
+
+export const formatPriceRange = ({ maxVariantPrice, minVariantPrice }) => {
+ if (maxVariantPrice.amount == minVariantPrice.amount) {
+ return `${formatPrice(maxVariantPrice)}`;
+ } else {
+ return `${formatPrice(minVariantPrice)} - ${formatPrice(
+ maxVariantPrice
+ )}`;
+ }
+};
+
+export const PriceRanges = ({
+ priceRange,
+ compareAtPriceRange,
+ availableForSale,
+}) => {
+ const onSale =
+ (compareAtPriceRange?.minVariantPrice?.amount ?? 0) >
+ (priceRange?.minVariantPrice?.amount ?? 0) ||
+ (compareAtPriceRange?.maxVariantPrice?.amount ?? 0) >
+ (priceRange?.maxVariantPrice?.amount ?? 0);
+ const isForSale = (priceRange?.maxVariantPrice?.amount ?? 0) > 0;
+
+ return (
+
+ {availableForSale ? (
+ isForSale && (
+ <>
+ <>
+ {onSale && (
+
+ {formatPriceRange(compareAtPriceRange)}{' '}
+
+ )}
+
+ {formatPriceRange(priceRange)}
+
+ )
+ ) : (
+ Sold Out
+ )}
+
+ );
+};
+
+export async function HomeProduct({ product }) {
+ const featuredImage = product?.images?.[0];
+ const collections = product?.collections?.nodes;
+
+ return (
+
+
+ {product?.title}
+ {collections && collections.length > 0 && (
+ {`(${collections
+ ?.map(collection => collection?.title)
+ .join(', ')})`}
+ )}
+
+
+ );
+}
+
+//TODO: suspense
+export async function HomeProductsList({ collection }) {
+ const products = await getCollectionProducts({
+ collection,
+ });
+
+ // console.log({ collection, products });
+ // const num = 4;
+ // console.log({
+ // price: products[num].priceRange,
+ // compareAt: products[num].compareAtPriceRange,
+ // title: products[num].title,
+ // });
+
+ return (
+ <>
+ {products.length === 0 ? (
+ {`No products found`}
+ ) : (
+
+ {products?.map(product => (
+ -
+
+
+ ))}
+
+ )}
+
+ );
+}
+
+//TODO: suspense
+export async function TypesNav() {
+ const typesMenu = await getMenu('types-nav');
+
+ // console.log({ typesMenu });
+
+ return (
+
+ {typesMenu?.map(menuItem => (
+ -
+ {menuItem?.title}
+
+ ))}
+
+ );
+}