filter by category

src/pages/dashboard.tsx

@@ -6,51 +6,61 @@ import SellListItem from "../components/sellListItem";
 const products = [
 	{
 		name: "Coca Cola",
+		category: "Boissons",
 		price: "0,50€",
 		quantity: "x50",
 	},
 	{
 		name: "Fanta",
+		category: "Boissons",
 		price: "0,50€",
 		quantity: "x50",
 	},
 	{
 		name: "Ice Tea",
+		category: "Boissons",
 		price: "0,50€",
 		quantity: "x50",
 	},
 	{
 		name: "Eau",
+		category: "Boissons",
 		price: "0,50€",
 		quantity: "x50",
 	},
 	{
 		name: "Eau gazeuse",
+		category: "Boissons",
 		price: "0,50€",
 		quantity: "x50",
 	},
 	{
 		name: "Sandwich",
+		category: "Manger",
 		price: "2€",
 		quantity: "x30",
 	},
 	{
 		name: "Pizza",
+		category: "Manger",
 		price: "2€",
 		quantity: "x20",
 	},
 	{
 		name: "Baguettine",
+		category: "Manger",
 		price: "1,50€",
 		quantity: "x20",
 	},
 	{
 		name: "Wrap",
+		category: "Manger",
 		price: "1,50€",
 		quantity: "x10",
 	},
 	{
 		name: "Donut",
+		category: "Dessert",
 		price: "1€",
 		quantity: "x30",
 	},
@@ -76,11 +86,14 @@ const Dashboard = () => {
 	return (
 		<Main path={path} handleSearch={handleSearch} title="Accueil">
 			<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
-				<ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-5">
-					{productsList.map((product) => (
-						<SellListItem product={product} key={product.name} />
-					))}
-				</ul>
+				{[...Array.from((new Set(productsList.map(item => item.category))))].map((category) => (<div>
+					<h1 className="text-lg font-medium py-2 pt-4">{category}</h1>
+					<ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-5">
+						{productsList.filter((p) => p.category === category).map((product) => (
+							<SellListItem product={product} key={product.name} />
+						))}
+					</ul>
+				</div>))}
 			</div>
 		</Main>
 	);