plp with filter and responsive
parent
afc0358a4e
commit
5b35dfacdd
|
|
@ -0,0 +1,210 @@
|
|||
import React from "react";
|
||||
import CategoriesData from "src/view/Categories";
|
||||
|
||||
const page = async ({ params, searchParams }) => {
|
||||
const data = [
|
||||
{
|
||||
id: 1,
|
||||
persianName: "Hydrating Cream",
|
||||
englishName: "Hydrating Cream",
|
||||
description:
|
||||
"A deeply moisturizing cream that keeps your skin hydrated all day long.",
|
||||
cost: 250000,
|
||||
costWithDiscount: 200000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 20,
|
||||
stock: 5,
|
||||
mainImage: "4",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
persianName: "Hair Strengthening Shampoo",
|
||||
englishName: "Hair Strengthening Shampoo",
|
||||
description:
|
||||
"A nourishing shampoo that strengthens hair roots and prevents hair fall.",
|
||||
cost: 180000,
|
||||
costWithDiscount: 150000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 17,
|
||||
stock: 2,
|
||||
mainImage: "3",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
persianName: "Vitamin C Serum",
|
||||
englishName: "Vitamin C Serum",
|
||||
description:
|
||||
"An antioxidant-rich serum that brightens skin and reduces signs of aging.",
|
||||
cost: 300000,
|
||||
costWithDiscount: 270000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 10,
|
||||
stock: 3,
|
||||
mainImage: "1",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
persianName: "Charcoal Face Mask",
|
||||
englishName: "Charcoal Face Mask",
|
||||
description:
|
||||
"A detoxifying mask that removes impurities and unclogs pores for a fresh look.",
|
||||
cost: 220000,
|
||||
costWithDiscount: 220000,
|
||||
hasDiscount: false,
|
||||
discountPercent: 0,
|
||||
stock: 8,
|
||||
mainImage: "4",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
persianName: "Body Lotion",
|
||||
englishName: "Body Lotion",
|
||||
description:
|
||||
"A lightweight body lotion that nourishes and hydrates dry skin.",
|
||||
cost: 210000,
|
||||
costWithDiscount: 185000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 12,
|
||||
stock: 6,
|
||||
mainImage: "2",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
persianName: "Aloe Vera Gel",
|
||||
englishName: "Aloe Vera Gel",
|
||||
description:
|
||||
"A soothing gel enriched with aloe vera to calm irritated skin.",
|
||||
cost: 160000,
|
||||
costWithDiscount: 160000,
|
||||
hasDiscount: false,
|
||||
discountPercent: 0,
|
||||
stock: 10,
|
||||
mainImage: "3",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
persianName: "Sunscreen SPF 50",
|
||||
englishName: "Sunscreen SPF 50",
|
||||
description:
|
||||
"A broad-spectrum sunscreen that protects against UV rays and prevents sunburn.",
|
||||
cost: 280000,
|
||||
costWithDiscount: 230000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 18,
|
||||
stock: 4,
|
||||
mainImage: "1",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
persianName: "Face Cleanser",
|
||||
englishName: "Face Cleanser",
|
||||
description:
|
||||
"A gentle face cleanser that removes dirt and oil without stripping moisture.",
|
||||
cost: 190000,
|
||||
costWithDiscount: 170000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 10,
|
||||
stock: 7,
|
||||
mainImage: "2",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
persianName: "Moisturizing Cream",
|
||||
englishName: "Moisturizing Cream",
|
||||
description:
|
||||
"A rich cream that provides deep hydration for soft and smooth skin.",
|
||||
cost: 260000,
|
||||
costWithDiscount: 260000,
|
||||
hasDiscount: false,
|
||||
discountPercent: 0,
|
||||
stock: 9,
|
||||
mainImage: "4",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
persianName: "Eye Serum",
|
||||
englishName: "Eye Serum",
|
||||
description:
|
||||
"A lightweight eye serum that reduces puffiness and dark circles.",
|
||||
cost: 350000,
|
||||
costWithDiscount: 310000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 12,
|
||||
stock: 5,
|
||||
mainImage: "3",
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
persianName: "Lip Balm",
|
||||
englishName: "Lip Balm",
|
||||
description:
|
||||
"A moisturizing lip balm that prevents chapped lips and adds a subtle shine.",
|
||||
cost: 90000,
|
||||
costWithDiscount: 80000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 11,
|
||||
stock: 12,
|
||||
mainImage: "1",
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
persianName: "Hand Cream",
|
||||
englishName: "Hand Cream",
|
||||
description:
|
||||
"A fast-absorbing hand cream that keeps hands soft and hydrated.",
|
||||
cost: 170000,
|
||||
costWithDiscount: 150000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 12,
|
||||
stock: 6,
|
||||
mainImage: "2",
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
persianName: "Night Repair Serum",
|
||||
englishName: "Night Repair Serum",
|
||||
description:
|
||||
"A serum that works overnight to repair and rejuvenate your skin.",
|
||||
cost: 390000,
|
||||
costWithDiscount: 350000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 10,
|
||||
stock: 4,
|
||||
mainImage: "3",
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
persianName: "Shaving Cream",
|
||||
englishName: "Shaving Cream",
|
||||
description:
|
||||
"A rich shaving cream that provides a smooth and irritation-free shave.",
|
||||
cost: 200000,
|
||||
costWithDiscount: 200000,
|
||||
hasDiscount: false,
|
||||
discountPercent: 0,
|
||||
stock: 9,
|
||||
mainImage: "4",
|
||||
},
|
||||
|
||||
{
|
||||
id: 15,
|
||||
persianName: "Shaving ",
|
||||
englishName: "Shaving ",
|
||||
description:
|
||||
"A fast-absorbing hand cream that keeps hands soft and hydrated.",
|
||||
cost: 200000,
|
||||
costWithDiscount: 200000,
|
||||
hasDiscount: false,
|
||||
discountPercent: 0,
|
||||
stock: 9,
|
||||
mainImage: "1",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div>
|
||||
<CategoriesData params={params} products={data} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default page;
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
"use client";
|
||||
import { useRouter } from "next/navigation";
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
const Page = (props) => {
|
||||
const router = useRouter();
|
||||
useEffect(() => {
|
||||
router.push("/categories/0");
|
||||
}, []);
|
||||
|
||||
return;
|
||||
};
|
||||
|
||||
export default Page;
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import ProductData from "@comp/AppsComponent/ProductData/page";
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
|
||||
async function getData(id) {
|
||||
return (
|
||||
<>
|
||||
<Product params={params} data={data} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import React from "react";
|
||||
import CardNormal from "src/components/Cards/CardNormal/page";
|
||||
|
||||
const Content = ({ products }) => {
|
||||
return (
|
||||
<div className="px-2 pb-20">
|
||||
<div className="flex">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-left ">
|
||||
Product Listing Page
|
||||
</h1>
|
||||
<p className="mb-0 text-sm text-gray-400 xs:text-center lg:text-left">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis,{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mt-10">
|
||||
{products.map((product, index) => (
|
||||
<div key={index} className="relative">
|
||||
<CardNormal data={product} priority />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Content;
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from "react";
|
||||
|
||||
const Filters = () => {
|
||||
return (
|
||||
<aside className="w-full md:w-2/5 p-6 md:mr-6 mb-6 md:mb-0">
|
||||
<h2 className="text-2xl font-bold mb-6 text-gray-800">Filters</h2>
|
||||
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-semibold mb-2 text-gray-700">
|
||||
Price Range
|
||||
</label>
|
||||
<input type="range" min="0" max="500000" className="w-full" />
|
||||
<div className="flex justify-between text-gray-600 text-sm mt-1">
|
||||
<span>0 $</span>
|
||||
<span>500,000 $ </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-semibold mb-2 text-gray-700">
|
||||
Category
|
||||
</label>
|
||||
<select className="w-full border p-3 rounded-sm bg-gray-100 text-sm">
|
||||
<option>All</option>
|
||||
<option>Skincare</option>
|
||||
<option>Haircare</option>
|
||||
<option>Bodycare</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-semibold mb-2 text-gray-700">
|
||||
Availability
|
||||
</label>
|
||||
<div className="flex items-center">
|
||||
<input type="checkbox" className="mr-2" />
|
||||
<span className="text-gray-600 !text-sm">In Stock Only</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="w-full bg-blue-600 text-white py-3 rounded-lg text-sm font-semibold hover:bg-blue-800 transition-all">
|
||||
Apply Filters
|
||||
</button>
|
||||
</aside>
|
||||
);
|
||||
};
|
||||
|
||||
export default Filters;
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import React from "react";
|
||||
import CardNormal from "src/components/Cards/CardNormal/page";
|
||||
import Navbar from "src/components/NavBar";
|
||||
import Content from "./components/Content";
|
||||
import Filters from "./components/Filters";
|
||||
import Footer from "../Landing/components/Footer";
|
||||
|
||||
const CategoriesData = ({ products }) => {
|
||||
return (
|
||||
<>
|
||||
<Navbar theme={1} />
|
||||
<div className="xs:container-none md:container mx-auto p-4 flex flex-col md:flex-row mt-10">
|
||||
<Filters />
|
||||
<Content products={products} />
|
||||
</div>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CategoriesData;
|
||||
|
|
@ -4,6 +4,7 @@ export default {
|
|||
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/view/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue