Refactored out status label

Client/src/Components/MonitorTable/index.css

@@ -27,29 +27,6 @@
   white-space: nowrap;
 }
 
-.host-status {
-  width: fit-content;
-}
-
-.host-status-details {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--env-var-color-4);
-  border-radius: var(--env-var-radius-2);
-  padding: calc(var(--env-var-spacing-1) / 2);
-}
-
-.host-status-text {
-  font-size: var(--env-var-font-size-medium);
-  line-height: var(--env-var-font-size-medium);
-}
-.host-status-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  margin-right: calc(var(--env-var-spacing-1) / 2);
-}
-
 .monitors .MuiPaper-root:has(table.MuiTable-root) {
   box-shadow: none;
   border: solid 1px var(--env-var-color-16);

Client/src/Components/MonitorTable/index.jsx

@@ -4,6 +4,7 @@ import ResponseTimeChart from "../Charts/ResponseTimeChart";
 import BasicTable from "../BasicTable";
 import OpenInNewPage from "../../assets/icons/open-in-new-page.svg?react";
 import { useNavigate } from "react-router-dom";
+import StatusLabel from "../StatusLabel";
 
 /**
  * Host component.
@@ -34,39 +35,6 @@ const Host = ({ params }) => {
   );
 };
 
-/**
- * Status component.
- * This subcomponent receives a params object and displays the status details of a monitor.
- *
- * @component
- * @param {Object} params - An object containing the following properties:
- * @param {string} params.backgroundColor - The background color of the status box.
- * @param {string} params.statusDotColor - The color of the status dot.
- * @param {string} params.status - The status text to display.
- * @returns {React.ElementType} Returns a div element with the host status.
- */
-const Status = ({ params }) => {
-  return (
-    <div className="host-status">
-      <div
-        className="host-status-details"
-        style={{ backgroundColor: params.backgroundColor }}
-      >
-        <div
-          className="host-status-dot"
-          style={{ backgroundColor: params.statusDotColor }}
-        />
-        <span
-          className="host-status-text"
-          style={{ textTransform: "capitalize" }}
-        >
-          {params.status}
-        </span>
-      </div>
-    </div>
-  );
-};
-
 /**
  * MonitorTable component.
  * Takes an array of monitor objects and displays them in a table.
@@ -118,7 +86,7 @@ const MonitorTable = ({ monitors = [] }) => {
       handleClick: () => navigate(`/monitors/${monitor._id}`),
       data: [
         { id: idx, data: <Host params={params} /> },
-        { id: idx + 1, data: <Status params={params} /> },
+        { id: idx + 1, data: <StatusLabel params={params} /> },
         { id: idx + 2, data: <ResponseTimeChart checks={monitor.checks} /> },
         { id: idx + 3, data: "TODO" },
       ],
@@ -132,7 +100,6 @@ MonitorTable.propTypes = {
   monitors: PropTypes.arrayOf(PropTypes.object).isRequired,
 };
 
-Status.propTypes = { params: PropTypes.object.isRequired };
 Host.propTypes = { params: PropTypes.object.isRequired };
 
 export default MonitorTable;

Client/src/Components/StatusLabel/index.css

@@ -0,0 +1,22 @@
+.host-status {
+  width: fit-content;
+}
+
+.host-status-details {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--env-var-color-4);
+  border-radius: var(--env-var-radius-2);
+  padding: calc(var(--env-var-spacing-1) / 2);
+}
+
+.host-status-text {
+  font-size: var(--env-var-font-size-medium);
+  line-height: var(--env-var-font-size-medium);
+}
+.host-status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin-right: calc(var(--env-var-spacing-1) / 2);
+}

Client/src/Components/StatusLabel/index.jsx

@@ -0,0 +1,39 @@
+import "./index.css";
+import PropTypes from "prop-types";
+
+/**
+ * Status component.
+ * This subcomponent receives a params object and displays the status details of a monitor.
+ *
+ * @component
+ * @param {Object} params - An object containing the following properties:
+ * @param {string} params.backgroundColor - The background color of the status box.
+ * @param {string} params.statusDotColor - The color of the status dot.
+ * @param {string} params.status - The status text to display.
+ * @returns {React.ElementType} Returns a div element with the host status.
+ */
+const StatusLabel = ({ params }) => {
+  return (
+    <div className="host-status">
+      <div
+        className="host-status-details"
+        style={{ backgroundColor: params.backgroundColor }}
+      >
+        <div
+          className="host-status-dot"
+          style={{ backgroundColor: params.statusDotColor }}
+        />
+        <span
+          className="host-status-text"
+          style={{ textTransform: "capitalize" }}
+        >
+          {params.status}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default StatusLabel;
+
+StatusLabel.propTypes = { params: PropTypes.object.isRequired };