add mods disclaimer

src/renderer/components/shared/tab-nav-bar.component.tsx

@@ -1,8 +1,9 @@
-import { DetailedHTMLProps, Fragment, useState } from "react";
+import { DetailedHTMLProps, Fragment } from "react";
 import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 
 type Props = {
+    tabIndex: number
     tabsText: string[],
     onTabChange: (index: number) => void,
     className?: string,
@@ -11,12 +12,12 @@ type Props = {
 
 export function TabNavBar(props: Props) {
 
-    const [currentTabIndex, setCurrentTabIndex] = useState(0);
+    const currentIndex = props.tabIndex ?? 0;
+
     const t = useTranslation();
     const secondColor = useThemeColor("second-color");
 
     const selectTab = (index: number) => {
-        setCurrentTabIndex(index);
         props.onTabChange(index);
     }
 
@@ -24,7 +25,7 @@ export function TabNavBar(props: Props) {
         <nav className={`relative h-8 shrink-0 cursor-pointer rounded-md overflow-hidden shadow-md shadow-black bg-light-main-color-2 dark:bg-main-color-2 ${props.className}`}>
             <div className="absolute w-full h-1 bottom-0" style={{color: secondColor}}>  
                 <span className="absolute h-full w-full bg-current brightness-50" />
-                <span className="absolute h-full block bg-current transition-transform duration-300 shadow-center shadow-current" style={{transform: `translate(${currentTabIndex * 100}%, 0)`, width: `calc(100% / ${props.tabsText.length})`}}/>
+                <span className="absolute h-full block bg-current transition-transform duration-300 shadow-center shadow-current" style={{transform: `translate(${currentIndex * 100}%, 0)`, width: `calc(100% / ${props.tabsText.length})`}}/>
             </div>
             <ul className="grid" style={{gridTemplateColumns: `repeat(${props.tabsText.length}, minmax(0, 1fr))`}}>
                 {props.tabsText.map((text, index) => (