From caba68e8aec5730a91ca4c8d9d7ebf3f4dcf5846 Mon Sep 17 00:00:00 2001
From: ImAlpha <arcticjcb@gmail.com>
Date: Tue, 5 Nov 2024 18:22:41 -0800
Subject: [PATCH] most of product page complete

---
 frontend/next.config.mjs                      |  10 ++
 .../src/app/products/[productId]/page.tsx     |  17 +--
 .../components/ProductPage/ProductPage.css    | 109 +++++++++++++++++
 .../components/ProductPage/ProductPage.tsx    | 111 ++++++++++++++----
 4 files changed, 217 insertions(+), 30 deletions(-)

diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs
index f19712c..bf65327 100644
--- a/frontend/next.config.mjs
+++ b/frontend/next.config.mjs
@@ -8,6 +8,16 @@ const nextConfig = {
 			},
 		]
 	},
+	images: {
+		remotePatterns: [
+			{
+				protocol: "https",
+				hostname: "ih1.redbubble.net",
+				port: "",
+				pathname: "/**",
+			},
+		],
+	},
 };
 
 export default nextConfig;
diff --git a/frontend/src/app/products/[productId]/page.tsx b/frontend/src/app/products/[productId]/page.tsx
index c0c9d3c..31f821f 100644
--- a/frontend/src/app/products/[productId]/page.tsx
+++ b/frontend/src/app/products/[productId]/page.tsx
@@ -1,9 +1,12 @@
-import React from 'react'
+"use client";
+import React from "react";
+import ProductPage from "@/components/ProductPage/ProductPage";
 
-export default function ProductDetails(){
-    return(
-        <div>
-            <h1 className="text-center">Product Details</h1>
-        </div>
-    )
+export default function ProductDetails({ params }: any) {
+  return (
+    <div className="">
+      {/* Pass url params to product page */}
+      <ProductPage productId={params.productId} />
+    </div>
+  );
 }
diff --git a/frontend/src/components/ProductPage/ProductPage.css b/frontend/src/components/ProductPage/ProductPage.css
index aad635f..91cb557 100644
--- a/frontend/src/components/ProductPage/ProductPage.css
+++ b/frontend/src/components/ProductPage/ProductPage.css
@@ -2,4 +2,113 @@
     padding: 20px 50px;
     display: flex;
     gap: 50px;
+
+    .left{
+        flex: 1;
+        display: flex;
+        gap: 20px;
+
+
+        .images{
+            flex: 1;
+
+            .product-image{
+                width: 100%;
+                height: 150px;
+                cursor: pointer;
+                margin-bottom: 10px;
+                position: relative;
+            }
+        }
+        .mainImage{
+            flex: 5;
+            display: flex;
+            .main-image{
+                width: 100%;
+                max-height: 800px;
+                cursor: pointer;
+                position: relative;
+            }
+        }
+    }
+
+    .right {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 30px;
+
+        .price{
+            font-size: 30px;
+            font-weight: 500;
+        }
+
+        .p{
+            font-size: 18px;
+            font-weight: 300;
+            text-align: justify;
+        }
+
+        .quantity{
+            display: flex;
+            align-items: center;
+            gap: 10px;  
+        }
+
+        .button{
+            width: 50px;
+            height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            border: none;
+        }
+        .add{
+            width: 250px;
+            padding: 10px;
+            background: #2879fe;
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 20px;
+            cursor: pointer;
+            border: none;
+            font-weight: 500;
+        }
+        .link{
+            display: flex;
+            gap: 20px;
+            
+            .item{
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                font-weight: 500;
+                color: #2879fe;
+                font-size: 0.875rem;
+                
+            }
+        }
+        
+        .info, .details{
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            color: #CCCCCC;
+            font-size: 0.875rem;
+            margin-top: 30px;
+            .hr{
+                width: 200px;
+                /* border: 1px solid #EEEEEE; */
+                border: 1px solid aqua;
+                
+            }
+        }
+    }
+    .hr{
+        border: 1px solid #EEEEEE;
+    }
 }
+    
\ No newline at end of file
diff --git a/frontend/src/components/ProductPage/ProductPage.tsx b/frontend/src/components/ProductPage/ProductPage.tsx
index 7bdf4fa..7df4ac2 100644
--- a/frontend/src/components/ProductPage/ProductPage.tsx
+++ b/frontend/src/components/ProductPage/ProductPage.tsx
@@ -1,10 +1,18 @@
+"use client";
 import React, { useState, useEffect } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import "./ProductPage.css";
+import { Button } from "@/components/ui/button";
+import { MdOutlineAddShoppingCart } from "react-icons/md";
+import { MdFavoriteBorder } from "react-icons/md";
+import { FaBalanceScale } from "react-icons/fa";
 
-const ProductPage = () => {
+const ProductPage = ({ productId }: any) => {
+  // console.log(productId);
   const [selectedImage, setSelectedImage] = useState(0);
+  const [quantity, setQuantity] = useState(1);
+
   const images = [
     "https://ih1.redbubble.net/image.2997405810.0746/ssrco,slim_fit_t_shirt,womens,101010:01c5ca27c6,front,square_product,600x600.jpg",
     "https://ih1.redbubble.net/image.2997405810.0746/ssrco,slim_fit_t_shirt,flatlay,101010:01c5ca27c6,front,wide_portrait,750x1000-bg,f8f8f8.jpg",
@@ -14,35 +22,92 @@ const ProductPage = () => {
     <div className="product">
       <div className="left">
         <div className="images">
-          <Image
-            src={images[0]}
-            width={64}
-            height={64}
-            className="rounded-full md:hidden"
-            alt="Profile picture"
-            onClick={e=>(setSelectedImage(0))}
-          />
-          <Image
-            src={images[1]}
-            width={64}
-            height={64}
-            className="rounded-full md:hidden"
-            onClick={e => setSelectedImage(1)}
-            alt="Profile picture"
-          />
+          <div className="product-image">
+            {/* <Image
+              src={images[parseInt(productId)]}
+              fill
+              className=""
+              alt="Shirt Mockup"
+              style={{ objectFit: "cover" }}
+              onClick={(e) => setSelectedImage(0)}
+              /> */}
+            <Image
+              src={images[0]}
+              fill
+              className=""
+              alt="Shirt Mockup"
+              style={{ objectFit: "cover" }}
+              onClick={(e) => setSelectedImage(0)}
+            />
+          </div>
+          <div className="product-image">
+            <Image
+              src={images[1]}
+              fill
+              className=""
+              alt="Shirt Mockup"
+              style={{ objectFit: "cover" }}
+              onClick={(e) => setSelectedImage(1)}
+            />
+          </div>
         </div>
         <div className="mainImage">
+          <div className="main-image">
             <Image
-            src={images[selectedImage]}
-            width={64}
-            height={64}
-            className="rounded-full md:hidden"
-            alt="Profile picture"
+              src={images[selectedImage]}
+              fill
+              className=""
+              style={{ objectFit: "cover" }}
+              alt="Profile picture"
             />
+          </div>
         </div>
       </div>
       <div className="right">
-
+        <h1>Title</h1>
+        <span className="price text-orange-600">$199</span>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, culpa
+          temporibus. Blanditiis, perferendis tempore praesentium voluptatibus
+          et, consectetur similique natus facilis reiciendis eum pariatur rem
+          vitae est aliquid, debitis corporis.
+        </p>
+        <div className="quantity">
+          {/* If quantity is at 1 then it stays at 1, otherwise it will subtract by 1 */}
+          <Button
+            className="bg-slate-600 text-xl"
+            onClick={() => setQuantity((prev) => (prev === 1 ? 1 : prev - 1))}
+          >
+            -
+          </Button>
+          <div>{quantity}</div>
+          <Button
+            className="bg-slate-600 text-xl"
+            onClick={() => setQuantity((prev) => prev + 1)}
+          >
+            +
+          </Button>
+        </div>
+        <Button className="add">
+          <MdOutlineAddShoppingCart /> ADD TO CART
+        </Button>
+        <div className="link">
+            <div className="item"><MdFavoriteBorder /> ADD TO WISHLIST</div>
+            <div className="item"><FaBalanceScale /> ADD TO COMPARE</div>
+        </div>
+        <div className="info">
+          <span>Vender: Polo</span>
+          <span>Product Type: T-Shirt</span>
+          <span>Tag: T-Shirt, Men, Top </span>
+        </div>
+        <hr />
+        <div className="details">
+          <span>DESCRIPTION</span>
+          <hr />
+          <span>ADDITIONAL INFORMATION</span>
+          <hr />
+          <span>FAQ</span>
+        </div>
       </div>
     </div>
   );