73 lines
3.0 KiB
TypeScript
73 lines
3.0 KiB
TypeScript
import { AddShoppingCart } from "@mui/icons-material";
|
|
import {Box, Card, CardActionArea, CardContent, CardMedia, IconButton, Paper, Rating, Typography } from "@mui/material";
|
|
import { useNavigate } from "react-router-dom";
|
|
import Item from "../../components/Item";
|
|
import { useBasket } from "../BasketProvider";
|
|
import "../helper.css";
|
|
import { useTranslation } from 'react-i18next';
|
|
import HTWImage from '../../assets/HTW.jpg';
|
|
|
|
export default function ItemCard({ item }: { item: Item }) {
|
|
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate()
|
|
const { addToBasket } = useBasket();
|
|
|
|
const handleAddToCart = () => {
|
|
addToBasket(item.id, 1);
|
|
console.log(`Added ${1} of ${item.name} to basket`);
|
|
};
|
|
|
|
const handleClick = () => {
|
|
navigate(`/product/${item.id}`, { state: { item } });
|
|
}
|
|
|
|
return (
|
|
<Paper elevation={4}>
|
|
<Card>
|
|
<CardActionArea onClick={handleClick}>
|
|
<CardMedia
|
|
component="img"
|
|
height="140"
|
|
image={HTWImage}
|
|
alt={item.name}
|
|
/>
|
|
<CardContent>
|
|
<Typography gutterBottom variant="h5" component="div">
|
|
{item.name}
|
|
</Typography>
|
|
<Rating name="half-rating" readOnly defaultValue={item.rating} precision={0.5} />
|
|
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
|
|
<Typography variant="body2" sx={{ color: 'text.secondary' }} className="item-description">
|
|
{(item.price * (1 - item.discount / 100)).toFixed(2)} €
|
|
</Typography>
|
|
<IconButton
|
|
aria-label={t('addToCart')}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
handleAddToCart();
|
|
}}
|
|
>
|
|
<AddShoppingCart />
|
|
</IconButton>
|
|
</Box>
|
|
|
|
{item.stock > 10 ? (
|
|
<Typography variant="body2">
|
|
{t('inStock')}
|
|
</Typography>
|
|
) : item.stock > 0 ? (
|
|
<Typography variant="body2" sx={{ color: 'orange' }}>
|
|
{t('almostSoldOut')}
|
|
</Typography>
|
|
) : (
|
|
<Typography variant="body2" sx={{ color: 'red' }}>
|
|
{t('outOfStock')}
|
|
</Typography>
|
|
)}
|
|
</CardContent>
|
|
</CardActionArea>
|
|
</Card>
|
|
</Paper>
|
|
)
|
|
} |