2.0 Overhaul start

src/pages/Config/ModuleConfig.tsx

@@ -1,7 +1,5 @@
 import type React from "react";
-import { useState } from "react";
-
-import { Pane, Tab, Tablist } from "evergreen-ui";
+import { Fragment, useState } from "react";
 
 import { CannedMessage } from "@components/PageComponents/ModuleConfig/CannedMessage";
 import { ExternalNotification } from "@components/PageComponents/ModuleConfig/ExternalNotification.js";
@@ -10,6 +8,7 @@ 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";
 
 export const ModuleConfig = (): JSX.Element => {
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -46,31 +45,31 @@ export const ModuleConfig = (): JSX.Element => {
   ];
 
   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">
+    <Tab.Group as="div" className="flex gap-3 w-full">
+      <Tab.List className="flex flex-col gap-1 w-44">
         {configSections.map((Config, index) => (
-          <Pane
-            key={index}
-            display={index === selectedIndex ? "block" : "none"}
-          >
-            <Config.element />
-          </Pane>
+          <Tab key={index} as={Fragment}>
+            {({ selected }) => (
+              <div
+                className={`flex items-center px-3 py-2 text-sm font-medium rounded-md cursor-pointer ${
+                  selected
+                    ? "bg-gray-100 text-gray-900"
+                    : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
+                }`}
+              >
+                {Config.label}
+              </div>
+            )}
+          </Tab>
         ))}
-      </Pane>
-    </Pane>
+      </Tab.List>
+      <Tab.Panels as={Fragment}>
+        {configSections.map((Config, index) => (
+          <Tab.Panel key={index} as={Fragment}>
+            <Config.element />
+          </Tab.Panel>
+        ))}
+      </Tab.Panels>
+    </Tab.Group>
   );
 };