71 lines
2.8 KiB
TypeScript
71 lines
2.8 KiB
TypeScript
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";
|
|
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)}`);
|
|
};
|
|
|
|
return (
|
|
<Box className="page-background" sx={{ minHeight: "100vh", pt: 4 }}>
|
|
<Typography variant="h3" align="center" gutterBottom>
|
|
{t('categories')}
|
|
</Typography>
|
|
<Typography variant="subtitle1" align="center" sx={{ mb: 4 }}>
|
|
...
|
|
</Typography>
|
|
<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>
|
|
);
|
|
} |