- organised file structure for dashboard

src/features/dashboard/components/systemStatus/StatusItems/StatusItemCPU.tsx

@@ -0,0 +1,23 @@
+import { faHardDrive } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type StatusItemProps = {
+  statusInfoItem: string;
+  description: string;
+};
+
+const StatusItemCPU = ({ statusInfoItem, description }: StatusItemProps) => {
+  return (
+    <div className="p-3 border border-gray-700 rounded-lg hover:bg-[#233241]">
+      <div className="flex flex-row gap-2 items-center">
+        <span className="font-bold text-xl bg-slate-700 p-1 px-2 rounded-md">
+          <FontAwesomeIcon icon={faHardDrive} />
+        </span>
+        <p className="text-lg">{statusInfoItem}</p>
+      </div>
+      <p className="text-slate-400">{description}</p>
+    </div>
+  );
+};
+
+export default StatusItemCPU;

src/features/dashboard/components/systemStatus/StatusItems/StatusItemLocal.tsx

@@ -0,0 +1,31 @@
+import { faClock } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type StatusItemProps = {
+  statusInfoItem: string;
+  description: string;
+};
+
+const StatusItemLocal = ({ statusInfoItem, description }: StatusItemProps) => {
+  const humanReadable = (string: string) => {
+    if (description.toLowerCase().includes("local")) {
+      const text = string.slice(0, statusInfoItem.length - 5);
+      return text;
+    }
+  };
+
+  return (
+    <div className="p-3 border border-gray-700 rounded-lg hover:bg-[#233241]">
+      <div className="flex flex-row gap-2 items-center">
+        <span className="font-bold text-xl bg-slate-700 p-1 px-2 rounded-md">
+          <FontAwesomeIcon icon={faClock} />
+        </span>
+        <p className="text-lg">{description.toLowerCase().includes("local") && humanReadable(statusInfoItem)}</p>
+      </div>
+
+      <p className="text-slate-400">{description}</p>
+    </div>
+  );
+};
+
+export default StatusItemLocal;

src/features/dashboard/components/systemStatus/StatusItems/StatusItemThreads.tsx

@@ -0,0 +1,24 @@
+import { faMicrochip } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type StatusItemProps = {
+  statusInfoItem: string;
+  description: string;
+};
+
+const StatusItemThreads = ({ statusInfoItem, description }: StatusItemProps) => {
+  return (
+    <div className="p-3 border border-gray-700 rounded-lg hover:bg-[#233241]">
+      <div className="flex flex-row gap-2 items-center">
+        <span className="font-bold text-xl bg-slate-700 p-1 px-2 rounded-md">
+          <FontAwesomeIcon icon={faMicrochip} />
+        </span>
+        <p className="text-lg">{statusInfoItem}</p>
+      </div>
+
+      <p className="text-slate-400">{description}</p>
+    </div>
+  );
+};
+
+export default StatusItemThreads;

src/features/dashboard/components/systemStatus/StatusItems/StatusItemUTC.tsx

@@ -0,0 +1,32 @@
+import { faClock } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type StatusItemProps = {
+  statusInfoItem: string;
+  description: string;
+};
+
+const StatusItemUTC = ({ statusInfoItem, description }: StatusItemProps) => {
+  const humanReadable = (string: string) => {
+    if (description.includes("UTC")) {
+      const text = string.slice(0, statusInfoItem.length - 3);
+      return text;
+    }
+  };
+
+  return (
+    <div className="p-3 border border-gray-700 rounded-lg hover:bg-[#233241]">
+      <div className="flex flex-row gap-2 items-center">
+        <span className="font-bold text-xl bg-slate-700 p-1 px-2 rounded-md">
+          <FontAwesomeIcon icon={faClock} />
+        </span>
+
+        <p className="text-lg">{description.toLowerCase().includes("utc") && humanReadable(statusInfoItem)}</p>
+      </div>
+
+      <p className="text-slate-400">{description}</p>
+    </div>
+  );
+};
+
+export default StatusItemUTC;

src/features/dashboard/components/systemStatus/SystemStatusCard.tsx

@@ -0,0 +1,30 @@
+import { useInfoSocket } from "../../../../app/context/WebSocketContext";
+import Card from "../../../../ui/Card";
+import CardHeader from "../../../../ui/CardHeader";
+import StatusItemCPU from "./StatusItems/StatusItemCPU";
+import StatusItemLocal from "./StatusItems/StatusItemLocal";
+import StatusItemThreads from "./StatusItems/StatusItemThreads";
+import StatusItemUTC from "./StatusItems/StatusItemUTC";
+
+const SystemStatusCard = () => {
+  const { data: stats } = useInfoSocket();
+
+  return (
+    <Card className="p-4">
+      <CardHeader title="System Status" />
+      {stats ? (
+        <div className="grid grid-cols-2 grid-rows-2 gap-4 col-span-2">
+          <StatusItemUTC statusInfoItem={stats["system-clock-utc"]} description={"UTC Time"} />
+          <StatusItemLocal statusInfoItem={stats["system-clock-local"]} description={"Local Time"} />
+          <StatusItemCPU statusInfoItem={stats["memory-cpu-status"]} description={"CPU"} />
+          <StatusItemThreads statusInfoItem={stats["thread-count"]} description={"Threads"} />
+        </div>
+      ) : (
+        <span className="text-slate-500">Loading system status…</span>
+      )}
+      <div className="text-sm flex gap-4"></div>
+    </Card>
+  );
+};
+
+export default SystemStatusCard;