From 5cd7e362e959fd51d229e4e6c1bce0cb49641cd7 Mon Sep 17 00:00:00 2001
From: terryjung0244 <terryjung0244@gmail.com>
Date: Tue, 2 Jul 2024 13:41:59 -0400
Subject: [PATCH] Define an array of maintenance item and Map maintenance items
 array to ListItem components with icons

---
 Client/src/Pages/Incidents/index.jsx | 38 ++++++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index a6f305498..70659aabc 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -1,15 +1,49 @@
 import React from "react";
-import { Card, CardContent, Box, Typography, Button } from "@mui/material";
+import "./index.css";
+import {
+  Card,
+  CardContent,
+  Box,
+  Typography,
+  Button,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+} from "@mui/material";
+import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 
 const Incidents = () => {
+  const maintenanceItems = [
+    "Mark your maintenance periods",
+    "Eliminate any misunderstandings",
+    "Stop sending alerts in maintenance windows",
+  ];
+
   return (
     <Card>
       <CardContent>
         <Box />
         <Typography>Create a maintenance window to</Typography>
+        <List>
+          {maintenanceItems.map((item, index) => {
+            <ListItem key={index}>
+              <ListItemIcon>
+                <CheckCircleOutlineIcon color="primary" />
+              </ListItemIcon>
+              <ListItemText primary={item} />
+            </ListItem>;
+          })}
+        </List>
       </CardContent>
       <Box>
-        <Button>Let&apos;s create your maintenance window</Button>
+        <Button
+          variant="contained"
+          color="primary"
+          sx={{ textTransform: "none" }}
+        >
+          Let&apos;s create your maintenance window
+        </Button>
       </Box>
     </Card>
   );