- added status grid items

- add react modal pkg

src/features/dashboard/components/systemHealthModal/SystemHealthModal.tsx

@@ -0,0 +1,48 @@
+import type { SystemHealthStatus } from "../../../../types/types";
+import Badge from "../../../../ui/Badge";
+import ModalComponent from "../../../../ui/ModalComponent";
+import StatusIndicators from "../../../../ui/StatusIndicators";
+import { capitalize } from "../../../../utils/utils";
+
+type SystemHealthModalProps = {
+  isSystemHealthModalOpen: boolean;
+  handleClose: () => void;
+  statusCategory: SystemHealthStatus[];
+  title: string;
+  isAllGood: boolean;
+};
+
+const SystemHealthModal = ({
+  isSystemHealthModalOpen,
+  handleClose,
+  statusCategory,
+  title,
+  isAllGood,
+}: SystemHealthModalProps) => {
+  return (
+    <ModalComponent isModalOpen={isSystemHealthModalOpen} close={handleClose}>
+      <div>
+        <div className="border-b border-gray-500">
+          <h2 className="text-xl font-bold mb-4 flex flex-row items-center">
+            {isAllGood ? <StatusIndicators status={"bg-green-500"} /> : <StatusIndicators status={"bg-amber-500"} />}
+            {capitalize(title)}
+          </h2>
+          <p className="text-sm text-slate-300">{isAllGood ? "All systems running" : "Some systems down"}</p>
+        </div>
+
+        <div>
+          {statusCategory?.map((status: SystemHealthStatus) => (
+            <div
+              className="border border-gray-700 p-4 rounded-md m-2 flex justify-between hover:bg-[#233241]"
+              key={status.id}
+            >
+              <span>{status.id}</span> <Badge text={status.tags[0]} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </ModalComponent>
+  );
+};
+
+export default SystemHealthModal;