Products

frontend/src/components/Machines.js

@@ -34,6 +34,7 @@ function Machines({ machines, onSelect }) {
             <Typography variant="h4" gutterBottom>
                 Machines
             </Typography>
+
             <List>
                 <Paper>{machineItems}</Paper>
             </List>

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 };

frontend/src/components/Products.js

@@ -1,11 +1,26 @@
+import * as React from "react";
+import Grid from "@mui/material/Unstable_Grid2";
 import Typography from "@mui/material/Typography";
+import { ProductCard } from "./ProductCard";
 
 function Products({ machineName, products, onSelect }) {
+    const productItems = products.map((product) => {
+        return (
+            <Grid md={6} key={product.id}>
+                <ProductCard product={product} />
+            </Grid>
+        );
+    });
+
     return (
         <>
             <Typography variant="h4" gutterBottom>
                 Products - {machineName}
             </Typography>
+
+            <Grid container spacing={2}>
+                {productItems}
+            </Grid>
         </>
     );
 }

frontend/src/pages/Home.js

@@ -30,10 +30,10 @@ function Home() {
 
     return (
         <Grid container spacing={2}>
-            <Grid md={4}>
+            <Grid md={3}>
                 <Machines machines={machines} onSelect={onMachineSelect} />
             </Grid>
-            <Grid md={8}>
+            <Grid md={9}>
                 {productsData && <Products machineName={productsData.machineName} products={productsData.products} />}
             </Grid>
         </Grid>