[FEATURE] Basic System with file manager (#4)

Co-authored-by: dunemask <dunemask@gmail.com>
Co-authored-by: Dunemask <dunemask@gmail.com>
Reviewed-on: https://gitea.dunemask.dev/elysium/minecluster/pulls/4

src/components/overview/Overview.jsx

@@ -0,0 +1,23 @@
+import { useState, useEffect } from "react";
+import { useSystemAvailable } from "@mcl/queries";
+import Box from "@mui/material/Box";
+import OverviewVisual from "./OverviewVisual.jsx";
+export default function Overview(props) {
+  const [memory, setMemory] = useState(100);
+  const [cpu, setCpu] = useState(100);
+  const { isLoading: systemLoading, data: systemAvailable } =
+    useSystemAvailable();
+
+  useEffect(() => {
+    if (systemLoading || !props.clusterMetrics) return;
+    setCpu((props.clusterMetrics.cpu / systemAvailable.cpu) * 100);
+    setMemory((props.clusterMetrics.memory / systemAvailable.memory) * 100);
+  }, [systemAvailable, props.clusterMetrics]);
+
+  return (
+    <Box className="overview-toolbar">
+      <OverviewVisual value={cpu} color="warning" label="CPU" />
+      <OverviewVisual value={memory} color="success" label="MEMORY" />
+    </Box>
+  );
+}