Cleanup & start transition of moduleConfig

src/pages/Config/ModuleConfig.tsx

@@ -7,10 +7,14 @@ import { RangeTest } from "@components/PageComponents/ModuleConfig/RangeTest.js"
 import { Serial } from "@components/PageComponents/ModuleConfig/Serial.js";
 import { StoreForward } from "@components/PageComponents/ModuleConfig/StoreForward.js";
 import { Telemetry } from "@components/PageComponents/ModuleConfig/Telemetry.js";
-import { Tab } from "@headlessui/react";
+import { useDevice } from "@app/core/providers/useDevice.js";
+import { NavBar } from "@app/Nav/NavBar.js";
+import { VerticalTabbedContent } from "@app/components/generic/VerticalTabbedContent.js";
 
 export const ModuleConfig = (): JSX.Element => {
-  const configSections = [
+  const { workingModuleConfig, connection } = useDevice();
+
+  const tabs = [
     {
       label: "MQTT",
       element: MQTT
@@ -46,31 +50,23 @@ export const ModuleConfig = (): JSX.Element => {
   ];
 
   return (
-    <Tab.Group as="div" className="flex w-full gap-3">
-      <Tab.List className="flex w-44 flex-col gap-1">
-        {configSections.map((Config, index) => (
-          <Tab key={index} as={Fragment}>
-            {({ selected }) => (
-              <div
-                className={`flex cursor-pointer items-center rounded-md px-3 py-2 text-sm font-medium ${
-                  selected
-                    ? "bg-gray-100 text-gray-900"
-                    : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
-                }`}
-              >
-                {Config.label}
-              </div>
-            )}
-          </Tab>
-        ))}
-      </Tab.List>
-      <Tab.Panels as={Fragment}>
-        {configSections.map((Config, index) => (
-          <Tab.Panel key={index} as={Fragment}>
-            <Config.element />
-          </Tab.Panel>
-        ))}
-      </Tab.Panels>
-    </Tab.Group>
+    <div className="flex flex-grow flex-col gap-2">
+      <NavBar
+        breadcrumb={["Module Config"]}
+        actions={[
+          {
+            label: "Apply & Reboot",
+            async onClick() {
+              workingModuleConfig.map(async (moduleConfig) => {
+                await connection?.setModuleConfig(moduleConfig);
+              });
+              await connection?.commitEditSettings();
+            }
+          }
+        ]}
+      />
+
+      <VerticalTabbedContent tabs={tabs} />
+    </div>
   );
 };