refactor: streamline Settings tab management by defaulting to the component library

Author: kyrers

web/src/layout/Header/navbar/Menu/Settings/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useRef } from "react";
 import { useClickAway } from "react-use";
 import { Tabs } from "@kleros/ui-components-library";
 import General from "./General";
@@ -12,7 +12,7 @@ const TABS = [
     id: 0,
     value: 0,
     text: "General",
-    content: null,
+    content: <General />,
   },
   {
     id: 1,
@@ -22,11 +22,10 @@ const TABS = [
   },
 ];
 
-const inlinePaddingCalc = "px-[calc(8px+(32-8)*((100vw-300px)/(1250-300)))]";
+const tabListInlinePaddingCalc = "[&>div:first-child]:px-[calc(8px+(32-8)*((100vw-300px)/(1250-300)))]";
 const landscapeWidthCalc = "lg:w-[calc(300px+(424-300)*((100vw-300px)/(1250-300)))]";
 
 const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
-  const [currentTab, setCurrentTab] = useState<number>(0);
   const containerRef = useRef(null);
   const location = useLocation();
   const navigate = useNavigate();
@@ -47,13 +46,9 @@ const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
     >
       <div className="flex justify-center text-2xl mt-6 text-klerosUIComponentsPrimaryText">Settings</div>
       <Tabs
-        className={cn("py-0 max-w-[660px] w-[86vw]", inlinePaddingCalc, landscapeWidthCalc)}
-        items={TABS}
-        callback={(_, value: number) => {
-          setCurrentTab(value);
-        }}
+        className={cn("py-0 max-w-[660px] w-[86vw]", landscapeWidthCalc, tabListInlinePaddingCalc)}
+        items={[TABS[0], { ...TABS[1], content: <NotificationSettings {...{ toggleIsSettingsOpen }} /> }]}
       />
-      {currentTab === 0 ? <General /> : <NotificationSettings {...{ toggleIsSettingsOpen }} />}
     </div>
   );
 };