Settings reorganization

frontend/src/components/ui/TabNavigation.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+interface Tab {
+  id: string;
+  label: string;
+  icon: string;
+}
+
+interface TabNavigationProps {
+  tabs: Tab[];
+  activeTab: string;
+  onTabChange: (tabId: string) => void;
+  className?: string;
+}
+
+export default function TabNavigation({
+  tabs,
+  activeTab,
+  onTabChange,
+  className = ''
+}: TabNavigationProps) {
+  return (
+    <div className={`border-b theme-border ${className}`}>
+      <nav className="-mb-px flex space-x-8">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => onTabChange(tab.id)}
+            className={`
+              whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm transition-colors
+              ${activeTab === tab.id
+                ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                : 'border-transparent theme-text hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600'
+              }
+            `}
+          >
+            <span className="mr-2">{tab.icon}</span>
+            {tab.label}
+          </button>
+        ))}
+      </nav>
+    </div>
+  );
+}