Service card

src/components/dashboard/ServiceList.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Service } from "../../types";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
+import Grid from "@mui/material/Unstable_Grid2";
+import ServiceCard from "./ServiceCard";
 
 interface ServiceListProps {
     services: Service[];
@@ -10,13 +10,15 @@ interface ServiceListProps {
 export default function ServiceList({ services }: ServiceListProps) {
     const serviceItems = services.map((service) => {
         return (
-            <Box className="service-card">
-                <Typography component={"h1"} key={service.name} className="service-name">
-                    {service.name}
-                </Typography>
-            </Box>
+            <Grid key={service.name} sx={{ display: "flex" }}>
+                <ServiceCard service={service} />
+            </Grid>
         );
     });
 
-    return <Box className="service-list">{serviceItems}</Box>;
+    return (
+        <Grid container rowSpacing={2} columnSpacing={2} className="service-list" sx={{ marginBottom: "1rem" }}>
+            {serviceItems}
+        </Grid>
+    );
 }