im hungry

src/pages/editor.jsx

@@ -12,6 +12,7 @@ export const TableContext = createContext();
 export const AreaContext = createContext();
 export const TabContext = createContext();
 export const NoteContext = createContext();
+export const SettingsContext = createContext();
 
 export default function Editor(props) {
   const [code, setCode] = useState("");
@@ -20,7 +21,7 @@ export default function Editor(props) {
   const [areas, setAreas] = useState([]);
   const [notes, setNotes] = useState([]);
   const [resize, setResize] = useState(false);
-  const [width, setWidth] = useState(340);
+  const [width, setWidth] = useState(320);
   const [selectedTable, setSelectedTable] = useState("");
   const [tab, setTab] = useState(Tab.tables);
   const [layout, setLayout] = useState({
@@ -35,11 +36,14 @@ export default function Editor(props) {
     notes: true,
     fullscreen: false,
   });
+  const [settings, setSettings] = useState({
+    strictMode: false,
+  });
 
   const dragHandler = (e) => {
     if (!resize) return;
     const w = e.clientX;
-    if (w > 340) setWidth(w);
+    if (w > 320) setWidth(w);
   };
 
   useEffect(() => {
@@ -54,39 +58,41 @@ export default function Editor(props) {
         <AreaContext.Provider value={{ areas, setAreas }}>
           <NoteContext.Provider value={{ notes, setNotes }}>
             <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
+              <SettingsContext.Provider value={{settings, setSettings}}>
+                <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>
+              </SettingsContext.Provider>
             </TabContext.Provider>
           </NoteContext.Provider>
         </AreaContext.Provider>