edited categories and added translations

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

@@ -1,9 +1,14 @@
 import { FormControl, FormControlLabel, Radio, RadioGroup, Rating } from "@mui/material";
 import React from "react";
 
+type FilterItemOption = {
+    value: string;
+    label: string;
+};
+
 type FilterItemProps = {
     filterName: string;
-    filterItems: any[];
+    filterItems: FilterItemOption[];
     value?: string | null;
     onChange?: (value: string) => void;
 };
@@ -14,12 +19,14 @@ export default function FilterItem({
     value,
     onChange
 }: FilterItemProps) {
-    if(!value) {
-        value = filterItems[0];
+    if (!value && filterItems.length > 0) {
+        value = filterItems[0].value;
     }
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        value = (event.target.value);
+        if (onChange) {
+            onChange(event.target.value);
+        }
     };
 
     return (
@@ -30,13 +37,13 @@ export default function FilterItem({
                     {filterItems.map((item, idx) => (
                         <FormControlLabel
                             key={idx}
-                            value={item}
+                            value={item.value}
                             control={<Radio />}
                             label={
-                                filterName === "Rating" ? (
-                                    <Rating readOnly value={Number(item)} precision={1} size="small" />
+                                /^[1-5]$/.test(item.value) ? (
+                                    <Rating readOnly value={Number(item.value)} precision={1} size="small" />
                                 ) : (
-                                    item
+                                    item.label
                                 )
                             }
                         />

01-frontend/src/pages/Category.tsx

@@ -5,33 +5,36 @@ 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"
-    }
-];
+import {useTranslation} from "react-i18next";
 
 export default function Category() {
+
+    const { t } = useTranslation();
     const navigate = useNavigate();
 
+    const categories = [
+        {
+            name: t('seeds'),
+            icon: <SpaIcon sx={{ fontSize: 48, color: "#388e3c" }} />,
+            filter: "Seeds",
+        },
+        {
+            name: t('gardenSupplies'),
+            icon: <ScienceIcon sx={{ fontSize: 48, color: "#fbc02d" }} />,
+            filter: "GardenSupplies"
+        },
+        {
+            name: t('technicalComponents'),
+            icon: <PrecisionManufacturingIcon sx={{ fontSize: 48, color: "#1976d2" }} />,
+            filter: "TechnicalComponents"
+        },
+        {
+            name: t('other'),
+            icon: <CategoryIcon sx={{ fontSize: 48, color: "#757575" }} />,
+            filter: "Other"
+        }
+    ];
+
     const handleCategoryClick = (filter: string) => {
         // Navigiere zur Home-Seite und übergebe die gewählte Kategorie als Query-Parameter
         navigate(`/?category=${encodeURIComponent(filter)}`);
@@ -39,11 +42,11 @@ export default function Category() {
 
     return (
         <Box className="page-background" sx={{ minHeight: "100vh", pt: 4 }}>
-            <Typography variant="h4" align="center" gutterBottom>
-                Kategorien entdecken
+            <Typography variant="h3" align="center" gutterBottom>
+                {t('categories')}
             </Typography>
             <Typography variant="subtitle1" align="center" sx={{ mb: 4 }}>
-                Wähle eine Kategorie, um passende Produkte zu entdecken.
+                ...
             </Typography>
             <Grid container spacing={4} justifyContent="center">
                 {categories.map((cat) => (

01-frontend/src/pages/Home.tsx

@@ -5,8 +5,12 @@ 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";
+import {useTranslation} from "react-i18next";
 
 export default function Home() {
+
+    const { t } = useTranslation();
+
     const items: Item[] = [
         {
             id: "1",
@@ -131,28 +135,42 @@ export default function Home() {
         // Weitere Items hinzufügen
     ];
 
-    const categoriesFilter: string[] = [
-        "Seeds",
-        "Fertilizers",
-        "Technical Components"
+    const categoriesFilter = [
+        { value: "", label: t("all") },
+        { value: "Seeds", label: t("seeds") },
+        { value: "GardenSupplies", label: t("gardenSupplies") },
+        { value: "TechnicalComponents", label: t("technicalComponents") },
+        { value: "Other", label: t("other") }
     ];
-    const priceFilter: string[] = [
-        "< 10",
-        "< 20",
-        "> 20"
+
+    const priceFilter = [
+        { value: "", label: t("all") },
+        { value: "< 10", label: "< 10" },
+        { value: "< 20", label: "< 20" },
+        { value: ">= 20", label: ">= 20" }
+    ];
+
+    const ratingFilter = [
+        { value: "", label: t("all") },
+        ...[5, 4, 3, 2, 1].map(value => ({
+            value: value.toString(),
+            label: value.toString()
+        }))
     ];
-    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
     const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+    const [selectedPrice, setSelectedPrice] = useState<string | null>(null);
+    const [selectedRating, setSelectedRating] = useState<string | null>(null);
 
     const location = useLocation();
+
     useEffect(() => {
         const params = new URLSearchParams(location.search);
         const category = params.get("category");
-        if (category && categoriesFilter.includes(category)) {
+        if (category && categoriesFilter.some(filter => filter.value === category)) {
             setSelectedCategory(category);
         }
     }, [location.search]);
@@ -163,7 +181,6 @@ export default function Home() {
         // navigate(`/?category=${encodeURIComponent(category)}`);
     };
 
-
     // Handler für die Pagination
     const handlePageChange = (event: React.ChangeEvent<unknown>, page: number) => {
         setCurrentPage(page);
@@ -197,13 +214,23 @@ export default function Home() {
         <div className="home-page-background">
             <div className="filter-container">
                 <FilterItem
-                    filterName="Category"
+                    filterName={t('category')}
                     filterItems={categoriesFilter}
                     value={selectedCategory}
                     onChange={handleCategoryChange}
                 />
-                <FilterItem filterName="Price" filterItems={priceFilter} />
-                <FilterItem filterName="Rating" filterItems={ratingFilter} />
+                <FilterItem
+                    filterName={t('price')}
+                    filterItems={priceFilter}
+                    value={selectedPrice}
+                    onChange={setSelectedPrice}
+                />
+                <FilterItem
+                    filterName={t('rating')}
+                    filterItems={ratingFilter}
+                    value={selectedRating}
+                    onChange={setSelectedRating}
+                />
             </div>
             <div className="page-background">
                 <Box className="cardgrid">