move frontend stuff to its own directory

frontend/src/TabController.tsx

@@ -0,0 +1,41 @@
+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 className="block">
+      <div className="tabs is-boxed is-centered">
+        <ul>
+          {tabs.map((tab, index) => (
+            <li className={currentIndex === index ? "is-active" : ""}>
+              <a onClick={() => handleTabClick(index)}>{tab.label}</a>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div>
+        {children.map((child, index) => (
+          <Fragment key={index}>
+            <div style={{ display: currentIndex === index ? "block" : "none" }}>
+              {child}
+            </div>
+          </Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}