Added Rating Cards for all product ratings

01-frontend/src/components/Rating.tsx

@@ -0,0 +1,8 @@
+type RatingType = {
+    id: string;
+    rating: number;
+    text: string;
+    date: string;
+};
+
+export default RatingType;

01-frontend/src/helper/RatingCard.tsx

@@ -1,9 +1,27 @@
-import { Typography } from "@mui/material";
+import { Card, CardActionArea, CardContent, Paper, Rating, Typography } from "@mui/material";
+import RatingType from "../components/Rating";
+
+export default function RatingCard(ratingType: RatingType) {
+
+    const handleClick = () => {
+        console.log(`Clicked on rating with id: ${ratingType.id}`);
+    }
 
-export default function RatingCard() {
     return (
-        <Typography variant="h5">
-            Hier steht ein Rating
-        </Typography>
+        <Paper elevation={4}>
+            <Card>
+                <CardActionArea onClick={handleClick}>
+                    <CardContent>
+                        <Typography gutterBottom variant="h5" component="div">
+                            Rating vom: {ratingType.date}
+                        </Typography>
+                        <Rating name="half-rating" readOnly defaultValue={ratingType.rating} precision={0.5} />
+                        <Typography variant="body2" sx={{ color: 'text.secondary' }} className="item-description">
+                            {ratingType.text}
+                        </Typography>
+                    </CardContent>
+                </CardActionArea>
+            </Card>
+        </Paper>
     );
 }

01-frontend/src/helper/Ratings.tsx

@@ -1,7 +1,30 @@
-import { Button, Divider, Rating, TextField, Typography } from "@mui/material";
+import { Box, Button, Divider, Rating, TextField, Typography } from "@mui/material";
 import RatingCard from "./RatingCard";
+import RatingType from "../components/Rating";
 
 export default function Ratings() {
+
+    const ratings: RatingType[] = [
+        {
+            id: "1",
+            rating: 4.5,
+            text: "Great product!",
+            date: "2023-10-01",
+        },
+        {
+            id: "2",
+            rating: 3.0,
+            text: "Average quality.",
+            date: "2023-10-02",
+        },
+        {
+            id: "3",
+            rating: 5.0,
+            text: "Excellent value for money!",
+            date: "2023-10-03",
+        },
+    ];
+
     return (
         <>
             <div className='contact-divider-box'>
@@ -10,12 +33,13 @@ export default function Ratings() {
                 <div className="rating-card-body">
                     <Typography variant="h5">
                     Rate this product:</Typography>
-                    <Rating name="half-rating" defaultValue={2.5} precision={0.5} />
+                    <Rating name="half-rating" defaultValue={2.5} precision={0.5}/>
                     <TextField
-                        label="Rating text"
+                        label="Rating text (optional)"
                         multiline
                         minRows={4}
                         maxRows={16}
+                        className="rating-text-field"
                     />
                     <Button variant="contained" color="primary" className="rating-button">
                         Submit
@@ -24,9 +48,11 @@ export default function Ratings() {
             <div className='contact-divider-box'>
                 <Divider className='contact-divider' />
             </div>
-            <Typography variant="h5">
-                Ratings:
-            </Typography>
-            <RatingCard /></>
+            <Box className="rating-card-box">
+            {ratings.map((ratingType: RatingType) => (
+                <RatingCard key={ratingType.id} {...ratingType} />
+            ))}
+            </Box>
+            </>
     );
 }

01-frontend/src/helper/helper.css

@@ -18,4 +18,15 @@
 
 .rating-button{
     max-width: 200px;
+}
+
+.rating-card-box{
+    display: grid;
+    align-items: center; /* Vertikale Zentrierung */
+    gap: 10px;
+    width: 100%;
+}
+
+.rating-text-field{
+    background-color: whitesmoke;
 }