dynamic routing start for products
This commit is contained in:
parent
9c9a1efa6e
commit
106a8f9a40
9
frontend/src/app/products/[productId]/page.tsx
Normal file
9
frontend/src/app/products/[productId]/page.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function ProductDetails(){
|
||||
return(
|
||||
<div>
|
||||
<h1 className="text-center">Product Details</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,13 +1,71 @@
|
||||
import React from 'react'
|
||||
import MenuCard from '@/components/ui/MenuCard/MenuCard'
|
||||
"use client";
|
||||
import React, {useState} from "react";
|
||||
import MenuCard from "@/components/ui/MenuCard/MenuCard";
|
||||
import { useParams } from "next/navigation";
|
||||
import Product from "@/../public/batch1/files_list.json";
|
||||
import Image from "next/image";
|
||||
|
||||
const Products = () => {
|
||||
return (
|
||||
<div>
|
||||
<MenuCard Menu={Product}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const catID = useParams();
|
||||
const [maxPrice, setMaxPrice] = useState(100);
|
||||
const [sort, setSort] = useState("asc");
|
||||
|
||||
export default Products
|
||||
return (
|
||||
<div className="products">
|
||||
<div className="left">
|
||||
<div className="filterItem">
|
||||
<h2>Product Categories</h2>
|
||||
<div className="inputItem">
|
||||
<input type="checkbox" id="1" value={1} />
|
||||
<label htmlFor="1">Men</label>
|
||||
</div>
|
||||
<div className="inputItem">
|
||||
<input type="checkbox" id="2" value={2} />
|
||||
<label htmlFor="2">Women</label>
|
||||
</div>
|
||||
<div className="inputItem">
|
||||
<input type="checkbox" id="3" value={3} />
|
||||
<label htmlFor="3">Boys</label>
|
||||
</div>
|
||||
<div className="inputItem">
|
||||
<input type="checkbox" id="4" value={4} />
|
||||
<label htmlFor="4">Girls</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="filterItem">
|
||||
<h2>Filter by Price</h2>
|
||||
<div className="inputItem">
|
||||
<span>0</span>
|
||||
<input type="range" min={0} max={100} onChange={(e) => setMaxPrice(parseInt(e.target.value))} />
|
||||
<span>{maxPrice}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="filterItem">
|
||||
<h2>Sort by</h2>
|
||||
<div className="inputItem">
|
||||
<span>0</span>
|
||||
<input type="radio" id="asc" value="asc" name="price" onChange={(e) => setSort("asc")} />
|
||||
<label htmlFor="asc">Price (Lowest first)</label>
|
||||
</div>
|
||||
<div className="inputItem">
|
||||
<span>0</span>
|
||||
<input type="radio" id="desc" value="desc" name="price" onChange={(e) => setSort("desc")}/>
|
||||
<label htmlFor="desc">Price (Highest first)</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right">
|
||||
<Image
|
||||
src="/white_logo.png"
|
||||
width={64}
|
||||
height={64}
|
||||
className="rounded-full md:hidden"
|
||||
alt="Profile picture"
|
||||
/>
|
||||
</div>
|
||||
<MenuCard Menu={Product} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Products;
|
||||
|
||||
@ -76,7 +76,7 @@ export default function Nav() {
|
||||
<a href="/about">About</a>
|
||||
<a className="flex relative items-center justify-center" href="/cart">
|
||||
<FiShoppingCart className="text-lg lg:text-xl" />
|
||||
<span className="absolute text-white text-xs w-5 h-5 rounded-[50%] bg-slate-400 -top-2.5 -right-2.5 flex items-center justify-center">
|
||||
<span className="absolute text-white text-xs w-5 h-5 rounded-[50%] bg-orange-600 -top-2.5 -right-2.5 flex items-center justify-center">
|
||||
0
|
||||
</span>
|
||||
</a>
|
||||
|
||||
5
frontend/src/components/ProductPage/ProductPage.css
Normal file
5
frontend/src/components/ProductPage/ProductPage.css
Normal file
@ -0,0 +1,5 @@
|
||||
.product {
|
||||
padding: 20px 50px;
|
||||
display: flex;
|
||||
gap: 50px;
|
||||
}
|
||||
51
frontend/src/components/ProductPage/ProductPage.tsx
Normal file
51
frontend/src/components/ProductPage/ProductPage.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import "./ProductPage.css";
|
||||
|
||||
const ProductPage = () => {
|
||||
const [selectedImage, setSelectedImage] = useState(0);
|
||||
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",
|
||||
];
|
||||
|
||||
return (
|
||||
<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>
|
||||
<div className="mainImage">
|
||||
<Image
|
||||
src={images[selectedImage]}
|
||||
width={64}
|
||||
height={64}
|
||||
className="rounded-full md:hidden"
|
||||
alt="Profile picture"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductPage;
|
||||
@ -58,7 +58,7 @@ const MenuCard = ({ Menu }: any) => {
|
||||
<span className="text-orange-600">Out of Stock</span>
|
||||
)}
|
||||
{/* Check if item is a favorite */}
|
||||
{menu_item.favorite === "yes" ? (
|
||||
{/* {menu_item.favorite === "yes" ? (
|
||||
<Image
|
||||
src="/star.svg"
|
||||
alt="jefe's star"
|
||||
@ -73,7 +73,7 @@ const MenuCard = ({ Menu }: any) => {
|
||||
/>
|
||||
) : (
|
||||
<div className="hidden"></div>
|
||||
)}
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
{/* description text */}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user