add memory usage

src/components/MemoryUsage.jsx

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from "react";
+import { Typography } from "@material-ui/core";
+
+export const MemoryUsage = () => {
+    const [memoryUsage, setMemoryUsage] = useState("Loading...");
+
+    useEffect(() => {
+        function updateMemoryUsage() {
+            if (performance.memory) {
+                const memoryInfo = performance.memory;
+                const usedMB = (memoryInfo.usedJSHeapSize / 1024 / 1024).toFixed(2);
+                setMemoryUsage(`Used: ${usedMB} MB`);
+            } else {
+                setMemoryUsage("Memory info not supported in this browser.");
+            }
+        }
+
+        const interval = setInterval(updateMemoryUsage, 1000);
+        return () => clearInterval(interval); // Cleanup on unmount
+    }, []);
+
+    return (
+        <Typography color="textPrimary" component="div">
+            <h2>Client-Side Memory Usage</h2>
+            <p style={{ fontSize: "1.2em", fontWeight: "bold" }}>{memoryUsage}</p>
+        </Typography>
+    );
+};