ignore folder

components/ui/Tabs.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+
+type TabItem = {
+  key: string;
+  title: string;
+  content: ReactNode;
+};
+
+type TabsProps = {
+  items: TabItem[];
+  active: string;
+  onChange: (key: string) => void;
+};
+
+export default function Tabs({ items, active, onChange }: TabsProps) {
+  return (
+    <div>
+      <ul className="nav nav-tabs mb-3">
+        {items.map((item) => (
+          <li key={item.key} className="nav-item">
+            <button
+              className={`nav-link ${item.key === active ? "active" : ""}`}
+              onClick={() => onChange(item.key)}
+            >
+              {item.title}
+            </button>
+          </li>
+        ))}
+      </ul>
+      <div>
+        {items.find((item) => item.key === active)?.content}
+      </div>
+    </div>
+  );
+}