fix tab error

src/pages/editor.jsx

@@ -5,10 +5,12 @@ import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import Canvas from "../components/canvas";
 import EditorPanel from "../components/editor_panel";
+import { Tab } from "../data/data";
 
 export const LayoutContext = createContext();
 export const TableContext = createContext();
 export const AreaContext = createContext();
+export const TabContext = createContext();
 
 export default function Editor(props) {
   const [code, setCode] = useState("");
@@ -18,6 +20,7 @@ export default function Editor(props) {
   const [resize, setResize] = useState(false);
   const [width, setWidth] = useState(340);
   const [selectedTable, setSelectedTable] = useState("");
+  const [tab, setTab] = useState(Tab.tables);
   const [layout, setLayout] = useState({
     header: true,
     sidebar: true,
@@ -37,9 +40,9 @@ export default function Editor(props) {
     if (w > 340) setWidth(w);
   };
 
-  useEffect(()=>{
+  useEffect(() => {
     document.title = "Editor";
-  }, [])
+  }, []);
 
   return (
     <LayoutContext.Provider value={{ layout, setLayout }}>
@@ -47,39 +50,41 @@ export default function Editor(props) {
         value={{ tables, setTables, relationships, setRelationships }}
       >
         <AreaContext.Provider value={{ areas, setAreas }}>
-          <div className="h-[100vh] overflow-hidden">
-            <ControlPanel />
-            <div
-              className={
-                layout.header
-                  ? `flex h-[calc(100vh-123.93px)]`
-                  : `flex h-[calc(100vh-51.97px)]`
-              }
-              onMouseUp={() => setResize(false)}
-              onMouseMove={dragHandler}
-            >
-              <DndProvider backend={HTML5Backend}>
-                {layout.sidebar && (
-                  <EditorPanel
+          <TabContext.Provider value={{ tab, setTab }}>
+            <div className="h-[100vh] overflow-hidden">
+              <ControlPanel />
+              <div
+                className={
+                  layout.header
+                    ? `flex h-[calc(100vh-123.93px)]`
+                    : `flex h-[calc(100vh-51.97px)]`
+                }
+                onMouseUp={() => setResize(false)}
+                onMouseMove={dragHandler}
+              >
+                <DndProvider backend={HTML5Backend}>
+                  {layout.sidebar && (
+                    <EditorPanel
+                      code={code}
+                      setCode={setCode}
+                      resize={resize}
+                      setResize={setResize}
+                      width={width}
+                      selectedTable={selectedTable}
+                      setSelectedTable={setSelectedTable}
+                    />
+                  )}
+                  <Canvas
                     code={code}
                     setCode={setCode}
-                    resize={resize}
-                    setResize={setResize}
-                    width={width}
                     selectedTable={selectedTable}
                     setSelectedTable={setSelectedTable}
                   />
-                )}
-                <Canvas
-                  code={code}
-                  setCode={setCode}
-                  selectedTable={selectedTable}
-                  setSelectedTable={setSelectedTable}
-                />
-              </DndProvider>
-              {layout.services && <Sidebar />}
+                </DndProvider>
+                {layout.services && <Sidebar />}
+              </div>
             </div>
-          </div>{" "}
+          </TabContext.Provider>
         </AreaContext.Provider>
       </TableContext.Provider>
     </LayoutContext.Provider>