fix build

src/pages/Config/AppConfig.tsx

@@ -0,0 +1,56 @@
+import type React from "react";
+import { useState } from "react";
+
+import { Pane, Tab, Tablist } from "evergreen-ui";
+
+import { ExternalNotification } from "@app/components/PageComponents/ModuleConfig/ExternalNotification.js";
+import { MQTT } from "@components/PageComponents/ModuleConfig/MQTT.js";
+import { Serial } from "@components/PageComponents/ModuleConfig/Serial.js";
+
+export const AppConfig = (): JSX.Element => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const configSections = [
+    {
+      label: "Interface",
+      element: MQTT,
+    },
+    {
+      label: "Logging",
+      element: Serial,
+    },
+    {
+      label: "Language",
+      element: ExternalNotification,
+    },
+  ];
+
+  return (
+    <Pane display="flex">
+      <Pane flexBasis={150} marginRight={24}>
+        <Tablist>
+          {configSections.map((Config, index) => (
+            <Tab
+              key={index}
+              direction="vertical"
+              isSelected={index === selectedIndex}
+              onSelect={() => setSelectedIndex(index)}
+            >
+              {Config.label}
+            </Tab>
+          ))}
+        </Tablist>
+      </Pane>
+      <Pane flex="1">
+        {configSections.map((Config, index) => (
+          <Pane
+            key={index}
+            display={index === selectedIndex ? "block" : "none"}
+          >
+            <Config.element />
+          </Pane>
+        ))}
+      </Pane>
+    </Pane>
+  );
+};

src/pages/Config/index.tsx

@@ -1,36 +1,31 @@
 import type React from "react";
-import { useState } from "react";
 
-import { CogIcon, CubeIcon } from "evergreen-ui";
+import { ApplicationsIcon, CogIcon, CubeIcon } from "evergreen-ui";
 
-import { Tab, TabbedContent } from "@components/layout/page/TabbedContent";
+import { TabbedContent, TabType } from "@components/layout/page/TabbedContent";
 
+import { AppConfig } from "./AppConfig.js";
 import { DeviceConfig } from "./DeviceConfig.js";
 import { ModuleConfig } from "./ModuleConfig.js";
 
 export const ConfigPage = (): JSX.Element => {
-  const [activeConfig, setActiveConfig] = useState(0);
-
-  const tabs: Tab[] = [
+  const tabs: TabType[] = [
     {
-      key: 0,
       name: "Device Config",
       icon: CogIcon,
       element: DeviceConfig,
     },
     {
-      key: 1,
       name: "Module Config",
       icon: CubeIcon,
       element: ModuleConfig,
     },
+    {
+      name: "App Config",
+      icon: ApplicationsIcon,
+      element: AppConfig,
+    },
   ];
 
-  return (
-    <TabbedContent
-      active={activeConfig}
-      setActive={setActiveConfig}
-      tabs={tabs}
-    />
-  );
+  return <TabbedContent tabs={tabs} />;
 };