chore: remember user-defined hight of the code editor and output

Author: JeelRajodiya

app/components/EditorNOutput/EditorNOutput.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useReducer, useRef } from "react";
+import React, { useState, useReducer, useRef, useEffect } from "react";
 import CodeEditor from "../CodeEditor";
 import styles from "./EditorNOutput.module.css";
 import { Box } from "@chakra-ui/react";
@@ -48,11 +48,20 @@ export default function EditorNOutput({
 
     if (newTopWidth > 32) {
       setTopWidth(newTopWidth);
+      localStorage.setItem("verticalTopHeight", String(newTopWidth));
     } else {
+      localStorage.setItem("verticalTopHeight", String(containerRect.top));
       setTopWidth(containerRect.top);
     }
   };
 
+  useEffect(() => {
+    const topHeight = localStorage.getItem("verticalTopHeight");
+    if (topHeight) {
+      setTopWidth(Number(topHeight));
+    }
+  }, []);
+
   return (
     <div
       className={styles.codeEditorNOutput}