Changed ItemCard Configuratioon

This commit is contained in:
FlorianSpeicher
2025-05-21 22:34:04 +02:00
parent 18ccd78dcc
commit 894099e7cd
2 changed files with 13 additions and 9 deletions

View File

@@ -3,6 +3,7 @@ import { Card, CardActionArea, CardContent, CardMedia, IconButton, Paper, Rating
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import Item from "../components/Item"; import Item from "../components/Item";
import { useBasket } from "./BasketProvider"; import { useBasket } from "./BasketProvider";
import "./helper.css";
export default function ItemCard({ item }: { item: Item }) { export default function ItemCard({ item }: { item: Item }) {
const navigate = useNavigate() const navigate = useNavigate()
@@ -18,28 +19,25 @@ export default function ItemCard({ item }: { item: Item }) {
} }
return ( return (
<Paper elevation={3}> <Paper elevation={4}>
<Card> <Card>
<CardActionArea onClick={handleClick}> <CardActionArea onClick={handleClick}>
<CardMedia <CardMedia
component="img" component="img"
height="140" height="140"
image="src//assets/HTW.jpg" image="src//assets/HTW.jpg"
alt="HTW Logo" alt={item.name}
/> />
<CardContent> <CardContent>
<Typography gutterBottom variant="h5" component="div"> <Typography gutterBottom variant="h5" component="div">
{item.name} {item.name}
</Typography> </Typography>
<Rating name="half-rating" readOnly defaultValue={item.rating} precision={0.5} /> <Rating name="half-rating" readOnly defaultValue={item.rating} precision={0.5} />
<Typography variant="body2" sx={{ color: 'text.secondary' }}> <Typography variant="body2" sx={{ color: 'text.secondary' }} className="item-description">
{item.description}
</Typography>
<IconButton color="primary" aria-label="add to shopping cart" onClick={handleAddToCart}>
<AddShoppingCart />
</IconButton>
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{item.price * (1 - item.discount / 100)} {item.price * (1 - item.discount / 100)}
<IconButton color="primary" aria-label="add to shopping cart" onClick={handleAddToCart}>
<AddShoppingCart />
</IconButton>
</Typography> </Typography>
</CardContent> </CardContent>
</CardActionArea> </CardActionArea>

View File

@@ -0,0 +1,6 @@
.item-description{
display: flex;
justify-content: space-between; /* Elemente an gegenüberliegenden Seiten platzieren */
align-items: center; /* Vertikale Zentrierung */
width: 100%;
}