83 lines
2.5 KiB
JavaScript
83 lines
2.5 KiB
JavaScript
import Navbar from "./components/Navbar";
|
|
import ProductCard from "./components/ProductCards";
|
|
import Dropdown from "./components/dropdown/index";
|
|
import { filterOperations } from "./components/filterOperations";
|
|
|
|
const App = () => {
|
|
const { filteredProducts, loading, error, filters, handleFilterChange } =
|
|
filterOperations();
|
|
|
|
if (loading) {
|
|
return <div>Loading...</div>;
|
|
}
|
|
|
|
if (error) {
|
|
return <div>Error: {error?.message}</div>;
|
|
}
|
|
|
|
const categoryOptions = [
|
|
{ value: "all", label: "All Categories" },
|
|
{ value: "men's clothing", label: "Men's Clothing" },
|
|
{ value: "women's clothing", label: "Women's Clothing" },
|
|
{ value: "jewelery", label: "Jewelery" },
|
|
{ value: "electronics", label: "Electronics" },
|
|
];
|
|
|
|
const priceOptions = [
|
|
{ value: "all", label: "All Prices" },
|
|
{ value: "low", label: "Below $50" },
|
|
{ value: "mid", label: "$50 - $100" },
|
|
{ value: "high", label: "Above $100" },
|
|
];
|
|
|
|
const ratingOptions = [
|
|
{ value: "all", label: "All Ratings" },
|
|
{ value: "4", label: "4 & Up" },
|
|
{ value: "3", label: "3 & Up" },
|
|
{ value: "2", label: "2 & Up" },
|
|
];
|
|
|
|
return (
|
|
<div className="bg-gradient-to-r from-blue-500 via-blue-300 to-blue-100 min-h-screen flex flex-col items-center text-white">
|
|
<header className="w-full py-4 fixed top-0 bg-black bg-opacity-80 z-10">
|
|
<Navbar />
|
|
</header>
|
|
<div className="w-full max-w-screen-lg mt-20 p-4">
|
|
<div className="flex flex-wrap justify-between items-center mb-6 p-4">
|
|
<Dropdown
|
|
name="category"
|
|
value={filters?.category}
|
|
onChange={handleFilterChange}
|
|
options={categoryOptions}
|
|
className="bg-slate-800 text-white rounded p-2 cursor-pointer"
|
|
/>
|
|
|
|
<Dropdown
|
|
name="price"
|
|
value={filters?.price}
|
|
onChange={handleFilterChange}
|
|
options={priceOptions}
|
|
className="bg-slate-800 text-white rounded p-2 ml-2 cursor-pointer"
|
|
/>
|
|
|
|
<Dropdown
|
|
name="rating"
|
|
value={filters?.rating}
|
|
onChange={handleFilterChange}
|
|
options={ratingOptions}
|
|
className="bg-slate-800 text-white rounded p-2 cursor-pointer"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 ">
|
|
{filteredProducts?.map((product) => (
|
|
<ProductCard key={product?.id} product={product} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default App;
|