- improved the system status ui

src/features/dashboard/components/SystemStatusCard.tsx

@@ -1,20 +1,24 @@
 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 w-[40%]">
-      <CardHeader title="Overview" />
+    <Card className="p-4">
+      <CardHeader title="System Status" />
       {stats ? (
-        <>
-          <div>UTC: {stats["system-clock-utc"]}</div>
-          <div>Local: {stats["system-clock-local"]}</div>
-          <span>CPU: {stats["memory-cpu-status"]}</span>
-          <span>Threads: {stats["thread-count"]}</span>
-        </>
+        <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>
       )}