Changed ItemCard Configuratioon
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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%;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user