feat: keep states between tab switches

src/TabController.tsx

@@ -0,0 +1,45 @@
+import { Fragment, ReactNode, useState } from "react";
+
+interface TabProps {
+  id: string;
+  label: string;
+}
+
+interface TabControllerProps {
+  tabs: TabProps[];
+  children: ReactNode[];
+}
+
+export default function TabController({ tabs, children }: TabControllerProps) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const handleTabClick = (index: number) => {
+    setCurrentIndex(index);
+  };
+
+  return (
+    <div>
+      <div>
+        <div className="container navbar">
+          {tabs.map((tab, index) => (
+            <button
+              key={tab.id}
+              className={
+                currentIndex === index ? "tab-button active" : "tab-button"
+              }
+              onClick={() => handleTabClick(index)}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      </div>
+      {children.map((child, index) => (
+        <Fragment key={index}>
+          <div style={{ display: currentIndex === index ? "block" : "none" }}>
+            {child}
+          </div>
+        </Fragment>
+      ))}
+    </div>
+  );
+}