Added Category page dummy. Connected Category with home page filter

01-frontend/src/helper/homepage/FilterItem.tsx

@@ -1,17 +1,25 @@
 import { FormControl, FormControlLabel, Radio, RadioGroup, Rating } from "@mui/material";
 import React from "react";
 
+type FilterItemProps = {
+    filterName: string;
+    filterItems: any[];
+    value?: string | null;
+    onChange?: (value: string) => void;
+};
+
 export default function FilterItem({
     filterName,
     filterItems,
-}: {
-    filterName: string;
-    filterItems: any[];
-}) {
-    const [value, setValue] = React.useState(filterItems[0]);
+    value,
+    onChange
+}: FilterItemProps) {
+    if(!value) {
+        value = filterItems[0];
+    }
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setValue(event.target.value);
+        value = (event.target.value);
     };
 
     return (

01-frontend/src/pages/Category.tsx

@@ -1,34 +1,68 @@
-import { Box, Typography, Button } from "@mui/material";
+import CategoryIcon from "@mui/icons-material/Category";
+import PrecisionManufacturingIcon from "@mui/icons-material/PrecisionManufacturing";
+import ScienceIcon from "@mui/icons-material/Science";
+import SpaIcon from "@mui/icons-material/Spa";
+import { Box, Card, CardActionArea, CardContent, Grid, Typography } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import "./pages.css";
 
+const categories = [
+    {
+        name: "Seeds",
+        icon: <SpaIcon sx={{ fontSize: 48, color: "#388e3c" }} />,
+        filter: "Seeds"
+    },
+    {
+        name: "Fertilizers",
+        icon: <ScienceIcon sx={{ fontSize: 48, color: "#fbc02d" }} />,
+        filter: "Fertilizers"
+    },
+    {
+        name: "Technical Components",
+        icon: <PrecisionManufacturingIcon sx={{ fontSize: 48, color: "#1976d2" }} />,
+        filter: "Technical Components"
+    },
+    {
+        name: "Sonstiges",
+        icon: <CategoryIcon sx={{ fontSize: 48, color: "#757575" }} />,
+        filter: "Other"
+    }
+];
+
 export default function Category() {
     const navigate = useNavigate();
 
-    const handleGoHome = () => {
-        navigate("/");
+    const handleCategoryClick = (filter: string) => {
+        // Navigiere zur Home-Seite und übergebe die gewählte Kategorie als Query-Parameter
+        navigate(`/?category=${encodeURIComponent(filter)}`);
     };
 
     return (
-        <Box className="no-page-container">
-            <Typography variant="h1" className="no-page-title">
-                Category
+        <Box className="page-background" sx={{ minHeight: "100vh", pt: 4 }}>
+            <Typography variant="h4" align="center" gutterBottom>
+                Kategorien entdecken
             </Typography>
-            <Typography variant="h5" className="no-page-subtitle">
-                Oops! The page you're looking for doesn't exist.
+            <Typography variant="subtitle1" align="center" sx={{ mb: 4 }}>
+                Wähle eine Kategorie, um passende Produkte zu entdecken.
             </Typography>
-            <Typography variant="body1" className="no-page-description">
-                It seems you may have taken a wrong turn. Let's get you back on track.
-            </Typography>
-            <Button
-                variant="contained"
-                color="primary"
-                size="large"
-                className="no-page-button"
-                onClick={handleGoHome}
-            >
-                Go Back to Home
-            </Button>
+            <Grid container spacing={4} justifyContent="center">
+                {categories.map((cat) => (
+                    <Grid item xs={12} sm={6} md={3} key={cat.name}>
+                        <Card elevation={4} sx={{ borderRadius: 3 }}>
+                            <CardActionArea onClick={() => handleCategoryClick(cat.filter)}>
+                                <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", py: 4 }}>
+                                    {cat.icon}
+                                    <CardContent>
+                                        <Typography variant="h6" align="center">
+                                            {cat.name}
+                                        </Typography>
+                                    </CardContent>
+                                </Box>
+                            </CardActionArea>
+                        </Card>
+                    </Grid>
+                ))}
+            </Grid>
         </Box>
     );
 }

01-frontend/src/pages/Home.tsx

@@ -4,6 +4,7 @@ import Item from "../components/Item";
 import FilterItem from "../helper/homepage/FilterItem";
 import ItemCard from "../helper/homepage/ItemCard";
 import "./pages.css"; // Import der CSS-Datei
+import { useLocation } from "react-router-dom";
 
 export default function Home() {
     const items: Item[] = [
@@ -145,6 +146,22 @@ export default function Home() {
     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
+    const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+
+    const location = useLocation();
+    useEffect(() => {
+        const params = new URLSearchParams(location.search);
+        const category = params.get("category");
+        if (category && categoriesFilter.includes(category)) {
+            setSelectedCategory(category);
+        }
+    }, [location.search]);
+
+    const handleCategoryChange = (category: string) => {
+        setSelectedCategory(category);
+        // Optional: URL aktualisieren
+        // navigate(`/?category=${encodeURIComponent(category)}`);
+    };
 
 
     // Handler für die Pagination
@@ -179,7 +196,12 @@ export default function Home() {
     return (
         <div className="home-page-background">
             <div className="filter-container">
-                <FilterItem filterName="Category" filterItems={categoriesFilter} />
+                <FilterItem
+                    filterName="Category"
+                    filterItems={categoriesFilter}
+                    value={selectedCategory}
+                    onChange={handleCategoryChange}
+                />
                 <FilterItem filterName="Price" filterItems={priceFilter} />
                 <FilterItem filterName="Rating" filterItems={ratingFilter} />
             </div>