most of product page complete
This commit is contained in:
parent
106a8f9a40
commit
caba68e8ae
@ -8,6 +8,16 @@ const nextConfig = {
|
||||
},
|
||||
]
|
||||
},
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "ih1.redbubble.net",
|
||||
port: "",
|
||||
pathname: "/**",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user