Changed ItemCard Configuratioon

01-frontend/src/helper/ItemCard.tsx

@@ -3,6 +3,7 @@ import { Card, CardActionArea, CardContent, CardMedia, IconButton, Paper, Rating
 import { useNavigate } from "react-router-dom";
 import Item from "../components/Item";
 import { useBasket } from "./BasketProvider";
+import "./helper.css";
 
 export default function ItemCard({ item }: { item: Item }) {
     const navigate = useNavigate()
@@ -18,28 +19,25 @@ export default function ItemCard({ item }: { item: Item }) {
     }
 
     return (
-        <Paper elevation={3}>
+        <Paper elevation={4}>
             <Card>
                 <CardActionArea onClick={handleClick}>
                     <CardMedia
                         component="img"
                         height="140"
                         image="src//assets/HTW.jpg"
-                        alt="HTW Logo"
+                        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' }}>
-                            {item.description}
-                        </Typography>
+                        <Typography variant="body2" sx={{ color: 'text.secondary' }} className="item-description">
+                            {item.price * (1 - item.discount / 100)} €
                             <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)} €
                         </Typography>
                     </CardContent>
                 </CardActionArea>

01-frontend/src/helper/helper.css

@@ -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%;
+}