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>
+    );
+};

src/components/OtherControls.jsx

@@ -3,6 +3,7 @@ import { Grid, Typography } from "@material-ui/core";
 import { MenuItem } from "./MenuItem";
 import { MenuSection } from "./MenuSection";
 import { ThemeToggle } from "./ThemeToggle";
+import { MemoryUsage } from "./MemoryUsage";
 
 export const OtherControls = props => {
   return (
@@ -17,6 +18,7 @@ export const OtherControls = props => {
           <ThemeToggle />
         </Grid>
       </MenuItem>
+      <MemoryUsage />
     </MenuSection>
   );
 };