From d5fdbf3cb0ded28ef710759ea7e0a2bacff033b0 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 27 Aug 2024 19:46:09 -0700
Subject: [PATCH] Added status box component

---
 Client/src/Pages/Monitors/Home/StatusBox.jsx | 105 +++++++++++++++++++
 Client/src/Pages/Monitors/Home/index.jsx     |   8 +-
 2 files changed, 109 insertions(+), 4 deletions(-)
 create mode 100644 Client/src/Pages/Monitors/Home/StatusBox.jsx

diff --git a/Client/src/Pages/Monitors/Home/StatusBox.jsx b/Client/src/Pages/Monitors/Home/StatusBox.jsx
new file mode 100644
index 000000000..cfb2ab838
--- /dev/null
+++ b/Client/src/Pages/Monitors/Home/StatusBox.jsx
@@ -0,0 +1,105 @@
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import { Box, Stack, Typography } from "@mui/material";
+import Arrow from "../../../assets/icons/top-right-arrow.svg?react";
+import background from "../../../assets/Images/background-grid.svg";
+import ClockSnooze from "../../../assets/icons/clock-snooze.svg?react";
+
+const StatusBox = ({ title, value }) => {
+  const theme = useTheme();
+
+  let sharedStyles = { position: "absolute", right: 8, opacity: 0.5 };
+
+  let color;
+  let icon;
+  if (title === "up") {
+    color = theme.pie.green.stroke;
+    icon = (
+      <Box sx={{ ...sharedStyles, top: 8 }}>
+        <Arrow />
+      </Box>
+    );
+  } else if (title === "down") {
+    color = theme.pie.red.stroke;
+    icon = (
+      <Box sx={{ ...sharedStyles, transform: "rotate(180deg)", top: 5 }}>
+        <Arrow />
+      </Box>
+    );
+  } else if (title === "paused") {
+    color = theme.pie.yellow.stroke;
+    icon = (
+      <Box sx={{ ...sharedStyles, top: 12, right: 12 }}>
+        <ClockSnooze />
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      position="relative"
+      flex={1}
+      border={1}
+      borderColor={theme.palette.otherColors.graishWhite}
+      borderRadius={`${theme.shape.borderRadius}px`}
+      backgroundColor={theme.palette.otherColors.white}
+      px={theme.gap.large}
+      py={theme.gap.ml}
+      overflow="hidden"
+      sx={{
+        "&:hover": {
+          backgroundColor: "#f9fafb",
+        },
+        "&:after": {
+          position: "absolute",
+          content: `""`,
+          backgroundImage: `url(${background})`,
+          width: "400px",
+          height: "200px",
+          top: "-10%",
+          left: "5%",
+          zIndex: 10000,
+          pointerEvents: "none",
+        },
+      }}
+    >
+      <Box
+        textTransform="uppercase"
+        fontSize={15}
+        letterSpacing={0.5}
+        color={theme.palette.otherColors.bluishGray}
+        mb={theme.gap.ml}
+        sx={{ opacity: 0.6 }}
+      >
+        {title}
+      </Box>
+      {icon}
+      <Stack
+        direction="row"
+        alignItems="flex-start"
+        fontSize={36}
+        fontWeight={600}
+        color={color}
+        gap="2px"
+      >
+        {value}
+        <Typography
+          component="span"
+          fontSize={20}
+          fontWeight={300}
+          color={theme.palette.otherColors.bluishGray}
+          sx={{ opacity: 0.3 }}
+        >
+          #
+        </Typography>
+      </Stack>
+    </Box>
+  );
+};
+
+StatusBox.propTypes = {
+  title: PropTypes.oneOf(["up", "down", "paused"]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+};
+
+export default StatusBox;
diff --git a/Client/src/Pages/Monitors/Home/index.jsx b/Client/src/Pages/Monitors/Home/index.jsx
index 13aa6067d..85f922f5e 100644
--- a/Client/src/Pages/Monitors/Home/index.jsx
+++ b/Client/src/Pages/Monitors/Home/index.jsx
@@ -4,13 +4,13 @@ import { useSelector, useDispatch } from "react-redux";
 import { getUptimeMonitorsByTeamId } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import { useNavigate } from "react-router-dom";
 import Button from "../../../Components/Button";
-import ServerStatus from "../../../Components/Charts/Servers/ServerStatus";
 import { useTheme } from "@emotion/react";
 import BasicTable from "../../../Components/BasicTable";
 import { Box, Stack, Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import SkeletonLayout from "./skeleton";
 import Fallback from "./fallback";
+import StatusBox from "./StatusBox";
 import { buildData } from "./monitorData";
 
 const Monitors = ({ isAdmin }) => {
@@ -73,9 +73,9 @@ const Monitors = ({ isAdmin }) => {
                 direction="row"
                 justifyContent="space-between"
               >
-                <ServerStatus title="Up" value={up} state="up" />
-                <ServerStatus title="Down" value={down} state="down" />
-                <ServerStatus title="Paused" value={0} state="pause" />
+                <StatusBox title="up" value={up} />
+                <StatusBox title="down" value={down} />
+                <StatusBox title="paused" value={0} />
               </Stack>
               <Box
                 flex={1}