im hungry

src/components/control_panel.jsx

@@ -23,7 +23,7 @@ import {
 import { toPng, toJpeg, toSvg } from "html-to-image";
 import { saveAs } from "file-saver";
 import { enterFullscreen, exitFullscreen } from "../utils";
-import { LayoutContext } from "../pages/editor";
+import { LayoutContext, SettingsContext } from "../pages/editor";
 
 export default function ControlPanel(props) {
   const [visible, setVisible] = useState(false);
@@ -33,6 +33,7 @@ export default function ControlPanel(props) {
   );
   const [extension, setExtension] = useState("");
   const { layout, setLayout } = useContext(LayoutContext);
+  const { setSettings } = useContext(SettingsContext);
 
   const menu = {
     File: {
@@ -173,7 +174,9 @@ export default function ControlPanel(props) {
       },
       "Strict mode": {
         children: [],
-        function: () => {},
+        function: () => {
+          setSettings((prev) => ({ ...prev, strictMode: !prev.strictMode }));
+        },
       },
       "Reset view": {
         children: [],

src/components/editor_panel.jsx

@@ -8,7 +8,7 @@ import TableOverview from "./table_overview";
 import ReferenceOverview from "./reference_overview";
 import AreaOverview from "./area_overview";
 import { Tab } from "../data/data";
-import { TabContext } from "../pages/editor";
+import { LayoutContext, TabContext } from "../pages/editor";
 import NotesOverview from "./notes_overview";
 import Issues from "./issues";
 
@@ -29,6 +29,7 @@ const myTheme = createTheme({
 const EditorPanel = (props) => {
   // const map = useRef(new Map());
   const { tab, setTab } = useContext(TabContext);
+  const { layout } = useContext(LayoutContext);
 
   const tabList = [
     { tab: "Tables", itemKey: Tab.tables },
@@ -58,28 +59,31 @@ const EditorPanel = (props) => {
 
   return (
     <div className="flex h-full">
-      <div className="flex flex-col h-full relative">
+      <div
+        className="flex flex-col h-full relative"
+        style={{ width: `${props.width}px` }}
+      >
         <div className="h-full flex-1 overflow-y-auto">
-          <div style={{ width: `${props.width}px` }}>
+          <Tabs
-            <Tabs
+            type="card"
-              type="card"
+            activeKey={tab}
-              activeKey={tab}
+            tabList={tabList}
-              tabList={tabList}
+            onChange={(key) => {
-              onChange={(key) => {
+              setTab(key);
-                setTab(key);
+            }}
-              }}
+            collapsible
-              collapsible
+          >
-            >
+            <div className="p-2">{contentList[parseInt(tab) - 1]}</div>
-              <div className="p-2">{contentList[parseInt(tab) - 1]}</div>
+          </Tabs>
-            </Tabs>
+        </div>
+        {layout.issues && (
+          <div className="mt-auto border-t-2 border-gray-200 shadow-inner shadow-neutral-200">
+            <Issues />
           </div>
-        </div>
+        )}
-        <div className="mt-auto border-t-2 border-gray-300">
-          <Issues />
-        </div>
       </div>
       <div
-        className={`flex justify-center items-center p-1 h-auto hover:bg-slate-300 cursor-col-resize ${
+        className={`flex justify-center items-center p-1 h-auto hover:bg-slate-400 cursor-col-resize ${
           props.resize ? "bg-slate-300" : ""
         }`}
         onMouseDown={() => props.setResize(true)}

src/components/issues.jsx

@@ -1,12 +1,39 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Collapse } from "@douyinfe/semi-ui";
+import { SettingsContext } from "../pages/editor";
 
 export default function Issues() {
-  return <div>
+  const { settings } = useContext(SettingsContext);
-    <Collapse>
+  return (
-        <Collapse.Panel header="Issues" itemKey="1">
+    <div>
-            hi
+      <Collapse style={{ width: "100%" }}>
+        <Collapse.Panel
+          header={
+            <div>
+              <i className="fa-solid fa-triangle-exclamation me-1 text-yellow-500"></i>{" "}
+              Issues
+            </div>
+          }
+          itemKey="1"
+        >
+          <div className="max-h-[160px] overflow-y-auto">
+            {settings.strictMode ? (
+              <div className="mb-1">
+                Strict mode is off so no issues will be displayed.
+              </div>
+            ) : (
+              <div>
+                <div className="py-2">Issue 1</div>
+                <div className="py-2">Issue 2</div>
+                <div className="py-2">Issue 3</div>
+                <div className="py-2">Issue 4</div>
+                <div className="py-2">Issue 5</div>
+                <div className="py-2">Issue 6</div>
+              </div>
+            )}
+          </div>
         </Collapse.Panel>
-    </Collapse>
+      </Collapse>
-  </div>;
+    </div>
+  );
 }

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">
+              <SettingsContext.Provider value={{settings, setSettings}}>
-                <ControlPanel />
+                <div className="h-[100vh] overflow-hidden">
-                <div
+                  <ControlPanel />
-                  className={
+                  <div
-                    layout.header
+                    className={
-                      ? `flex h-[calc(100vh-123.93px)]`
+                      layout.header
-                      : `flex h-[calc(100vh-51.97px)]`
+                        ? `flex h-[calc(100vh-123.93px)]`
-                  }
+                        : `flex h-[calc(100vh-51.97px)]`
-                  onMouseUp={() => setResize(false)}
+                    }
-                  onMouseMove={dragHandler}
+                    onMouseUp={() => setResize(false)}
-                >
+                    onMouseMove={dragHandler}
-                  <DndProvider backend={HTML5Backend}>
+                  >
-                    {layout.sidebar && (
+                    <DndProvider backend={HTML5Backend}>
-                      <EditorPanel
+                      {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}
                       />
-                    )}
+                    </DndProvider>
-                    <Canvas
+                    {layout.services && <Sidebar />}
-                      code={code}
+                  </div>
-                      setCode={setCode}
-                      selectedTable={selectedTable}
-                      setSelectedTable={setSelectedTable}
-                    />
-                  </DndProvider>
-                  {layout.services && <Sidebar />}
                 </div>
-              </div>
+              </SettingsContext.Provider>
             </TabContext.Provider>
           </NoteContext.Provider>
         </AreaContext.Provider>