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,9 +59,11 @@ 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
             type="card"
             activeKey={tab}
@@ -73,13 +76,14 @@ const EditorPanel = (props) => {
             <div className="p-2">{contentList[parseInt(tab) - 1]}</div>
           </Tabs>
         </div>
-        </div>
-        <div className="mt-auto border-t-2 border-gray-300">
+        {layout.issues && (
+          <div className="mt-auto border-t-2 border-gray-200 shadow-inner shadow-neutral-200">
             <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>
-    <Collapse>
-        <Collapse.Panel header="Issues" itemKey="1">
-            hi
+  const { settings } = useContext(SettingsContext);
+  return (
+    <div>
+      <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>
-  </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,6 +58,7 @@ export default function Editor(props) {
         <AreaContext.Provider value={{ areas, setAreas }}>
           <NoteContext.Provider value={{ notes, setNotes }}>
             <TabContext.Provider value={{ tab, setTab }}>
+              <SettingsContext.Provider value={{settings, setSettings}}>
                 <div className="h-[100vh] overflow-hidden">
                   <ControlPanel />
                   <div
@@ -87,6 +92,7 @@ export default function Editor(props) {
                     {layout.services && <Sidebar />}
                   </div>
                 </div>
+              </SettingsContext.Provider>
             </TabContext.Provider>
           </NoteContext.Provider>
         </AreaContext.Provider>