Added filter panel to home page

01-frontend/src/helper/FilterItem.tsx

@@ -0,0 +1,40 @@
+import { FormControl, FormControlLabel, Radio, RadioGroup, Rating } from "@mui/material";
+import React from "react";
+
+export default function FilterItem({
+    filterName,
+    filterItems,
+}: {
+    filterName: string;
+    filterItems: any[];
+}) {
+    const [value, setValue] = React.useState(filterItems[0]);
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setValue(event.target.value);
+    };
+
+    return (
+        <div>
+            <h3>{filterName}</h3>
+            <FormControl>
+                <RadioGroup value={value} onChange={handleChange}>
+                    {filterItems.map((item, idx) => (
+                        <FormControlLabel
+                            key={idx}
+                            value={item}
+                            control={<Radio />}
+                            label={
+                                filterName === "Rating" ? (
+                                    <Rating readOnly value={Number(item)} precision={1} size="small" />
+                                ) : (
+                                    item
+                                )
+                            }
+                        />
+                    ))}
+                </RadioGroup>
+            </FormControl>
+        </div>
+    );
+}

01-frontend/src/pages/Home.tsx

@@ -1,6 +1,7 @@
 import { Box, Pagination } from "@mui/material";
 import { useEffect, useState } from "react";
 import Item from "../components/Item";
+import FilterItem from "../helper/FilterItem";
 import ItemCard from "../helper/ItemCard";
 import "./pages.css"; // Import der CSS-Datei
 
@@ -129,6 +130,18 @@ export default function Home() {
         // Weitere Items hinzufügen
     ];
 
+    const categoriesFilter: string[] = [
+        "Seeds",
+        "Fertilizers",
+        "Technical Components"
+    ];
+    const priceFilter: string[] = [
+        "< 10",
+        "< 20",
+        "> 20"
+    ];
+    const ratingFilter: number[] = [1, 2, 3, 4, 5];
+
     const [currentPage, setCurrentPage] = useState(1); // Zustand für die aktuelle Seite
     const [itemsPerPage, setItemsPerPage] = useState(9); // Dynamische Anzahl der Items pro Seite
     const [visibleItems, setVisibleItems] = useState<Item[]>([]); // Zustand für die sichtbaren Items
@@ -147,7 +160,7 @@ export default function Home() {
             const startIndex = (currentPage - 1) * newItemsPerPage;
             setVisibleItems(items.slice(startIndex, startIndex + newItemsPerPage));
         };
-    
+
         updateItems(); // Initialer Aufruf
         window.addEventListener("resize", updateItems); // Event-Listener hinzufügen
         return () => window.removeEventListener("resize", updateItems); // Event-Listener entfernen
@@ -164,21 +177,29 @@ export default function Home() {
     };
 
     return (
-        <div className="page-background">
+        <div className="home-page-background">
-            <Box className="cardgrid">
+            <div className="filter-container">
-                {visibleItems.map((item) => (
+                <FilterItem filterName="Category" filterItems={categoriesFilter} />
-                    <ItemCard key={item.id} item={item} />
+                <FilterItem filterName="Price" filterItems={priceFilter} />
-                ))}
+                <FilterItem filterName="Rating" filterItems={ratingFilter} />
-            </Box>
+            </div>
-           
+            <div className="page-background">
-            <Pagination
+                <Box className="cardgrid">
-                count={Math.ceil(items.length / itemsPerPage)} // Gesamtanzahl der Seiten
+                    {visibleItems.map((item) => (
-                page={currentPage} // Aktuelle Seite
+                        <ItemCard key={item.id} item={item} />
-                onChange={handlePageChange} // Seitenwechsel-Handler
+                    ))}
-                variant="outlined"
+                </Box>
-                shape="rounded"
+
-                className="pagination" // CSS-Klasse für die Pagination
+                <Pagination
-            />
+                    count={Math.ceil(items.length / itemsPerPage)} // Gesamtanzahl der Seiten
+                    page={currentPage} // Aktuelle Seite
+                    onChange={handlePageChange} // Seitenwechsel-Handler
+                    variant="outlined"
+                    shape="rounded"
+                    className="pagination" // CSS-Klasse für die Pagination
+                />
+            </div>
         </div>
+
     );
 }

01-frontend/src/pages/pages.css

@@ -65,6 +65,7 @@
     overflow: hidden;
     padding: 20px 0; /* Abstand oben und unten */
     box-sizing: border-box; /* Stellt sicher, dass Padding in die Höhe einbezogen wird */
+    width: 100%; /* Damit der Hintergrund die gesamte Breite abdeckt */
 }
 
 .pagination {
@@ -121,4 +122,17 @@
     justify-content: space-between;
     padding: 20px 0; /* Abstand oben und unten */
     box-sizing: border-box; /* Stellt sicher, dass Padding in die Höhe einbezogen wird */
+}
+
+.home-page-background {
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+.filter-container {
+    width: 10%;
+    display: grid;
+    margin-left: 20px;
+    margin-right: -20px;
 }