Products

frontend/src/components/ProductCard.js

@@ -0,0 +1,31 @@
+import * as React from "react";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import CardMedia from "@mui/material/CardMedia";
+import Typography from "@mui/material/Typography";
+import { CardActionArea } from "@mui/material";
+
+function ProductCard({ product }) {
+    return (
+        <Card>
+            <CardActionArea>
+                <CardMedia
+                    component="img"
+                    height="140"
+                    image="/static/images/cards/contemplative-reptile.jpg"
+                    alt="green iguana"
+                />
+                <CardContent>
+                    <Typography gutterBottom variant="h5" component="div">
+                        {product.name}
+                    </Typography>
+                    <Typography variant="body2" color="text.secondary">
+                        {product.description}
+                    </Typography>
+                </CardContent>
+            </CardActionArea>
+        </Card>
+    );
+}
+
+export { ProductCard };