103 lines
3.2 KiB
TypeScript
103 lines
3.2 KiB
TypeScript
"use client";
|
|
import React, {useEffect, 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";
|
|
import 'dotenv/config';
|
|
|
|
const Products = () => {
|
|
const catID = useParams();
|
|
const [maxPrice, setMaxPrice] = useState(100);
|
|
const [sort, setSort] = useState("asc");
|
|
const [data, setData] = useState([]);
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
const response = await fetch(process.env.NEXT_PUBLIC_API_URL +"/products?populate=*", {
|
|
method: "GET",
|
|
headers: {
|
|
Authorization: "Bearer " + process.env.NEXT_PUBLIC_API_TOKEN
|
|
}
|
|
});
|
|
// const response = await fetch(process.env.NEXT_PUBLIC_Flask_URL +"/images", {
|
|
// method: "GET",
|
|
// });
|
|
const data = await response.json();
|
|
|
|
// console.log(data);
|
|
|
|
// Flask
|
|
// console.log(data.files);
|
|
// setData(data.files);
|
|
|
|
// Strapi
|
|
console.log(data.data);
|
|
// console.log(data.data[0].image.url);
|
|
setData(data.data);
|
|
};
|
|
fetchData();
|
|
}, []);
|
|
|
|
|
|
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={data} />
|
|
{/* <button onClick={GetData} className="bg-blue-500 text-white px-4 py-2 rounded-md">Get Data</button> */}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Products;
|