From f54c0cfe650e14b5840fae5e37ebb379d50826ff Mon Sep 17 00:00:00 2001
From: andr-ew <andrewcshike@gmail.com>
Date: Wed, 21 Jun 2023 14:41:06 -0500
Subject: [PATCH] app/page: products list markup

---
 app/page.js | 47 +++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/app/page.js b/app/page.js
index e5cd00295..175972b67 100644
--- a/app/page.js
+++ b/app/page.js
@@ -1,3 +1,46 @@
-export default function Page() {
-    return <h1>Hello, Next.js!</h1>;
+import Link from 'next/link';
+import Image from 'next/image';
+
+import { getCollectionProducts } from 'lib/shopify';
+
+export async function HomeProduct({ product }) {
+    const featuredImage = product?.images?.[0];
+
+    return (
+        <Link href={`/${product?.handle}`}>
+            <Image
+                src={featuredImage?.url}
+                alt={featuredImage?.altText}
+                width={featuredImage?.width}
+                height={featuredImage?.height}
+            />
+            <p>{product?.title}</p>
+        </Link>
+    );
+}
+
+export default async function HomePage() {
+    const collection = process.env.HOMEPAGE_COLLECTION;
+    const products = await getCollectionProducts({
+        collection,
+    });
+
+    console.log({ collection, products });
+    // console.log({ img: products[1].images });
+
+    return (
+        <>
+            {products.length === 0 ? (
+                <p>{`No products found`}</p>
+            ) : (
+                <ul>
+                    {products.map(product => (
+                        <li key={product?.handle}>
+                            <HomeProduct {...{ product }} />
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </>
+    );
 }