Simple Products Pages Done

app/(pages)/_globals/globals.scss

@@ -73,3 +73,13 @@ p {
 input, select {
 	font-size: 1rem;
 }
+
+button {
+    background-color: var(--mid-background);
+    color: var(--text-light);
+    padding: var(--small-spacer);
+    border-radius: var(--b-radius);
+    border: none;
+    font-size: 1.125rem;
+    cursor: pointer;
+}

app/(pages)/product/[id]/page.tsx

@@ -1,11 +1,23 @@
 'use client';
 import useProduct from '@hooks/useProduct';
-import styles from './page.module.scss';
+import ProductPage from '../_components/ProductPage/ProductPage';
+
+interface Product {
+  id: string;
+  src: string;
+  alt: string;
+  name: string;
+  price: number;
+}
 
 export default function Product({ params }: { params: { id: string } }) {
   const { product, loading } = useProduct(params.id);
   if (loading) {
     return 'loading...';
   }
-  return <div className={styles.container}>{JSON.stringify(product)}</div>;
+
+  if (product === null) {
+    return 'product does not exist';
+  }
+  return <ProductPage {...(product as Product)} />;
 }

app/(pages)/product/_components/ProductPage/ProductPage.module.scss

@@ -0,0 +1,25 @@
+$mid-gap: var(--spacer);
+
+.container {
+    display: flex;
+    flex-direction: row;
+    padding: var(--medium-spacer);
+    gap: $mid-gap;
+    background-color: var(--light-foreground);
+}
+
+.main_img_container {
+    width: calc(calc(100% - $mid-gap) / 2);
+    aspect-ratio: calc(5/4);
+    position: relative;
+
+    .main_image {
+        object-fit: cover;
+    }
+}
+
+.prod_information {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer);
+}

app/(pages)/product/_components/ProductPage/ProductPage.tsx

@@ -0,0 +1,25 @@
+import styles from './ProductPage.module.scss';
+import Image from 'next/image';
+
+interface Product {
+  id: string;
+  src: string;
+  alt: string;
+  name: string;
+  price: number;
+}
+
+export default function ProductPage({ id: _, src, alt, name, price }: Product) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.main_img_container}>
+        <Image src={src} alt={alt} fill className={styles.main_image} />
+      </div>
+      <div className={styles.prod_information}>
+        <h2>{name}</h2>
+        <p>${price}</p>
+        <button className={styles.add_to_cart_button}>add to cart</button>
+      </div>
+    </div>
+  );
+}

app/(pages)/products/_data/products.ts

@@ -1,3 +1,11 @@
+interface Product {
+  id: string;
+  src: string;
+  alt: string;
+  name: string;
+  price: number;
+}
+
 const products = [
   {
     id: '1',
@@ -43,4 +51,4 @@ const products = [
   },
 ];
 
-export default products;
+export default products as Product[];