claude-code

web/components/settings/SettingsNav.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import {
+  Settings,
+  Cpu,
+  Key,
+  Shield,
+  Server,
+  Keyboard,
+  Database,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type SettingsSection =
+  | "general"
+  | "model"
+  | "api"
+  | "permissions"
+  | "mcp"
+  | "keyboard"
+  | "data";
+
+interface NavItem {
+  id: SettingsSection;
+  label: string;
+  icon: React.ElementType;
+}
+
+const NAV_ITEMS: NavItem[] = [
+  { id: "general", label: "General", icon: Settings },
+  { id: "model", label: "Model", icon: Cpu },
+  { id: "api", label: "API & Auth", icon: Key },
+  { id: "permissions", label: "Permissions", icon: Shield },
+  { id: "mcp", label: "MCP Servers", icon: Server },
+  { id: "keyboard", label: "Keyboard", icon: Keyboard },
+  { id: "data", label: "Data & Privacy", icon: Database },
+];
+
+interface SettingsNavProps {
+  active: SettingsSection;
+  onChange: (section: SettingsSection) => void;
+  searchQuery: string;
+}
+
+export function SettingsNav({ active, onChange, searchQuery }: SettingsNavProps) {
+  const filtered = searchQuery
+    ? NAV_ITEMS.filter((item) =>
+        item.label.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+    : NAV_ITEMS;
+
+  return (
+    <nav className="w-48 flex-shrink-0 py-2">
+      {filtered.map((item) => {
+        const Icon = item.icon;
+        return (
+          <button
+            key={item.id}
+            onClick={() => onChange(item.id)}
+            className={cn(
+              "w-full flex items-center gap-2.5 px-3 py-2 rounded-md text-sm transition-colors text-left",
+              active === item.id
+                ? "bg-surface-800 text-surface-100"
+                : "text-surface-400 hover:text-surface-200 hover:bg-surface-800/50"
+            )}
+          >
+            <Icon className="w-4 h-4 flex-shrink-0" />
+            {item.label}
+          </button>
+        );
+      })}
+    </nav>
+  );
+}