reworked farming station components page
This commit is contained in:
Laura Dolibois
@@ -4,6 +4,7 @@
|
||||
"active": "laufend",
|
||||
"activeOrder": "Laufende Bestellung",
|
||||
"address": "Adresse",
|
||||
"addAllToCart": "Alles in den Warenkorb",
|
||||
"addToCart": "In den Warenkorb",
|
||||
"addedToCart": "Produkt wurde erfolgreich dem Warenkorb hinzugefügt",
|
||||
"almostSoldOut": "Fast ausverkauft",
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
"active": "active",
|
||||
"activeOrder": "Active order",
|
||||
"address": "Address",
|
||||
"addAllToCart": "Add all to card",
|
||||
"addToCart": "Add to cart",
|
||||
"addedToCart": "Product added to shopping cart successfully",
|
||||
"almostSoldOut": "Almost sold out",
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Box, Typography, Grid, List, ListItem, ListItemText } from "@mui/material";
|
||||
import { Box, Button, Typography } from "@mui/material";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useState } from "react";
|
||||
import "./pages.css";
|
||||
import Item from "../components/Item";
|
||||
import ItemCard from "../helper/homepage/ItemCard"
|
||||
import ItemCard from "../helper/homepage/ItemCard";
|
||||
import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
|
||||
|
||||
import farmingStation from '../assets/fscomponents/fs_components_0.png';
|
||||
import growrack from '../assets/fscomponents/fs_components_1.png';
|
||||
@@ -19,14 +19,14 @@ export default function FSComponents() {
|
||||
const { t } = useTranslation();
|
||||
const [hoverIndex, setHoverIndex] = useState<number | null>(null);
|
||||
|
||||
const components = [
|
||||
"Regal",
|
||||
"Tank",
|
||||
"Steuerung",
|
||||
"Beleuchtung",
|
||||
"Pumpe",
|
||||
"Pflanztöpfe",
|
||||
"Schläuche"
|
||||
const exampleItems = [
|
||||
{ id: "1", uuid: "uuid-1", name: "Regal", price100: 12999, discount100: 0, rating: 9, stock: 12 },
|
||||
{ id: "2", uuid: "uuid-2", name: "Tank", price100: 4999, discount100: 50, rating: 3, stock: 5 },
|
||||
{ id: "3", uuid: "uuid-3", name: "Steuerung", price100: 8999, discount100: 0, rating: 5, stock: 0 },
|
||||
{ id: "4", uuid: "uuid-4", name: "Beleuchtung", price100: 2999, discount100: 20, rating: 8, stock: 3 },
|
||||
{ id: "5", uuid: "uuid-5", name: "Pumpe", price100: 1999, discount100: 0, rating: 10, stock: 25 },
|
||||
{ id: "6", uuid: "uuid-6", name: "Pflanztöpfe", price100: 1099, discount100: 0, rating: 4, stock: 15 },
|
||||
{ id: "7", uuid: "uuid-7", name: "Schläuche", price100: 799, discount100: 0, rating: 7, stock: 9 }
|
||||
];
|
||||
|
||||
const componentImages = [
|
||||
@@ -39,167 +39,63 @@ export default function FSComponents() {
|
||||
pipes
|
||||
];
|
||||
|
||||
const exampleItems: Item[] = [
|
||||
{
|
||||
id: "1",
|
||||
uuid: "uuid-1",
|
||||
name: "Regal",
|
||||
price100: 12999,
|
||||
discount100: 0,
|
||||
rating: 4.5,
|
||||
stock: 12
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
uuid: "uuid-2",
|
||||
name: "Tank",
|
||||
price100: 4999,
|
||||
discount100: 500,
|
||||
rating: 4.2,
|
||||
stock: 5
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
uuid: "uuid-3",
|
||||
name: "Steuerung",
|
||||
price100: 8999,
|
||||
discount100: 0,
|
||||
rating: 4.7,
|
||||
stock: 0
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
uuid: "uuid-4",
|
||||
name: "Beleuchtung",
|
||||
price100: 2999,
|
||||
discount100: 100,
|
||||
rating: 4.0,
|
||||
stock: 3
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
uuid: "uuid-5",
|
||||
name: "Pumpe",
|
||||
price100: 1999,
|
||||
discount100: 0,
|
||||
rating: 3.8,
|
||||
stock: 25
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
uuid: "uuid-6",
|
||||
name: "Pflanztöpfe",
|
||||
price100: 1099,
|
||||
discount100: 0,
|
||||
rating: 4.3,
|
||||
stock: 15
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
uuid: "uuid-7",
|
||||
name: "Schläuche",
|
||||
price100: 799,
|
||||
discount100: 0,
|
||||
rating: 4.1,
|
||||
stock: 9
|
||||
}
|
||||
];
|
||||
|
||||
const selectedItem = hoverIndex !== null ? exampleItems[hoverIndex] : null;
|
||||
|
||||
return (
|
||||
<Box sx={{ width: '100%' }}>
|
||||
<Box sx={{ width: '100%', maxWidth: 1200, mx: 'auto', pt: 2 }}>
|
||||
<Typography
|
||||
variant="h3"
|
||||
align="center"
|
||||
gutterBottom
|
||||
sx={{ color: 'text.primary' }}
|
||||
>
|
||||
{t('componentsFarmingStation')}
|
||||
</Typography>
|
||||
<Box sx={{ width: '100%', display: 'flex', maxWidth: 1600, mx: 'auto', pt: 2, height: '100vh' }}>
|
||||
{/* Bild links */}
|
||||
<Box sx={{
|
||||
width: 'auto',
|
||||
height: '90vh',
|
||||
position: 'sticky',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 2,
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<Box component="img"
|
||||
src={hoverIndex !== null ? componentImages[hoverIndex] : farmingStation}
|
||||
alt={t('componentsFarmingStation')}
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: 'auto',
|
||||
maxHeight: '80vh',
|
||||
objectFit: 'contain',
|
||||
borderRadius: 2,
|
||||
border: theme => `4px solid ${theme.palette.primary.main}`,
|
||||
marginBottom: 2
|
||||
}}
|
||||
/>
|
||||
|
||||
<Grid container spacing={4}>
|
||||
{/* Bild */}
|
||||
<Grid item xs={12} md={5} sx={{ border: '1px solid red' }}>
|
||||
<Box
|
||||
component="img"
|
||||
src={hoverIndex !== null ? componentImages[hoverIndex] : farmingStation}
|
||||
alt={t('componentsFarmingStation')}
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: 'auto',
|
||||
maxHeight: '80vh',
|
||||
borderRadius: 2,
|
||||
border: '3px solid green',
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Button variant="contained" fullWidth startIcon={<AddShoppingCartIcon />}>
|
||||
{t('addAllToCart')}
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Liste */}
|
||||
<Grid item xs={12} md={4} sx={{ p: 2 }}>
|
||||
<List>
|
||||
{components.map((item, index) => (
|
||||
<ListItem
|
||||
key={index}
|
||||
disablePadding
|
||||
onMouseEnter={() => setHoverIndex(index)}
|
||||
onMouseLeave={() => setHoverIndex(null)}
|
||||
>
|
||||
<ListItemText
|
||||
primaryTypographyProps={{
|
||||
variant: 'h5',
|
||||
sx: {
|
||||
color: hoverIndex === index ? 'green' : 'text.primary',
|
||||
transition: 'color 0.2s ease',
|
||||
},
|
||||
}}
|
||||
primary={item}
|
||||
/>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</Grid>
|
||||
|
||||
{/* ItemCard oder Platzhalter */}
|
||||
<Grid item xs={12} md={3} sx={{
|
||||
minWidth: {
|
||||
xs: '100%',
|
||||
md: 250,
|
||||
},
|
||||
maxWidth: '100%',
|
||||
}}>
|
||||
{selectedItem ? (
|
||||
<ItemCard item={selectedItem} />
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
width: 250,
|
||||
height: 300,
|
||||
borderRadius: 2,
|
||||
border: '2px dashed grey',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: 'text.secondary',
|
||||
fontStyle: 'italic',
|
||||
opacity: 0.5,
|
||||
padding: 2,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{ whiteSpace: 'normal', wordBreak: 'break-word' }}
|
||||
>
|
||||
{t('hoverToSeeDetails')}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
{/* Items rechts */}
|
||||
<Box sx={{
|
||||
width: '60%',
|
||||
height: '90vh',
|
||||
overflowY: 'auto',
|
||||
padding: 2,
|
||||
}}>
|
||||
<Box mb={2}>
|
||||
<Typography variant="h4" align="center" gutterBottom sx={{ color: 'text.primary' }}>
|
||||
{t('componentsFarmingStation')}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box className="cardgrid">
|
||||
{exampleItems.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
onMouseEnter={() => setHoverIndex(index)}
|
||||
onMouseLeave={() => setHoverIndex(null)}
|
||||
>
|
||||
<ItemCard item={item} />
|
||||
</div>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user