64 lines
2.6 KiB
TypeScript
64 lines
2.6 KiB
TypeScript
import { AddShoppingCart } from "@mui/icons-material";
|
|
import { 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';
|
|
|
|
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="src//assets/HTW.jpg"
|
|
alt={item.name}
|
|
/>
|
|
<CardContent>
|
|
<Typography gutterBottom variant="h5" component="div">
|
|
{item.name}
|
|
</Typography>
|
|
<Rating name="half-rating" readOnly defaultValue={item.rating} precision={0.5} />
|
|
<Typography variant="body2" sx={{ color: 'text.secondary' }} className="item-description">
|
|
{(item.price * (1 - item.discount / 100)).toFixed(2)} €
|
|
<IconButton aria-label={t('addToCart')} onClick={handleAddToCart}>
|
|
<AddShoppingCart />
|
|
</IconButton>
|
|
</Typography>
|
|
|
|
{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>
|
|
)
|
|
} |