Merge pull request #11 from include-davis/feat/products-page

Feat/products page

app/(pages)/_data/navLinks.json

@@ -1,7 +1,7 @@
 [
     {
         "name": "shop",
-        "slug": "/shop"
+        "slug": "/products"
     },
     {
         "name": "about",

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)/_hooks/useProduct.ts

@@ -0,0 +1,26 @@
+'use client';
+import { useEffect, useState } from 'react';
+import products from '../products/_data/products';
+
+interface Product {
+  id: string;
+  src: string;
+  alt: string;
+  name: string;
+  price: number;
+}
+
+export default function useProduct(id: string) {
+  const [product, setProduct] = useState<Product | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const filteredProducts = products.filter((p) => p.id === id);
+    if (filteredProducts.length !== 0) {
+      setProduct(filteredProducts[0]);
+    }
+    setLoading(false);
+  }, [id]);
+
+  return { product, loading };
+}

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

@@ -0,0 +1,23 @@
+'use client';
+import useProduct from '@hooks/useProduct';
+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...';
+  }
+
+  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)/shop/_data/products.ts → 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[];