first commit

frontend/src/components/ui/Tabs.tsx

@@ -0,0 +1,41 @@
+import { ReactNode, useState } from 'react';
+
+interface Tab {
+  id: string;
+  label: string;
+  content: ReactNode;
+}
+
+interface TabsProps {
+  tabs: Tab[];
+  defaultTab?: string;
+}
+
+export default function Tabs({ tabs, defaultTab }: TabsProps) {
+  const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id);
+
+  return (
+    <div>
+      <div className="border-b border-gray-200">
+        <nav className="flex -mb-px space-x-8">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`py-4 px-1 border-b-2 font-medium text-sm whitespace-nowrap ${
+                activeTab === tab.id
+                  ? 'border-blue-500 text-blue-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </nav>
+      </div>
+      <div className="mt-4">
+        {tabs.find((tab) => tab.id === activeTab)?.content}
+      </div>
+    </div>
+  );
+}