feat: add SettingsSidebar component with section navigation

2026-05-16 20:45:56 +02:00
parent bf67a93b31
commit c3886f0925
1 changed files with 41 additions and 0 deletions
@@ -0,0 +1,41 @@
+import React from "react";
+
+export type SettingsSection = "llm" | "trading" | "stocks" | "system";
+
+interface SettingsSidebarProps {
+  activeSection: SettingsSection;
+  onSectionChange: (section: SettingsSection) => void;
+}
+
+const sections: { id: SettingsSection; label: string; icon: string }[] = [
+  { id: "llm", label: "LLM & Agents", icon: "🧠" },
+  { id: "trading", label: "Trading Defaults", icon: "📊" },
+  { id: "stocks", label: "Stock Database", icon: "📋" },
+  { id: "system", label: "System", icon: "⚙️" },
+];
+
+export default function SettingsSidebar({ activeSection, onSectionChange }: SettingsSidebarProps) {
+  return (
+    <aside className="w-60 border-r border-gray-200 bg-white h-full sticky top-0 overflow-y-auto">
+      <div className="p-6">
+        <h2 className="text-lg font-bold text-gray-900 mb-6">Settings</h2>
+        <nav className="space-y-1">
+          {sections.map((section) => (
+            <button
+              key={section.id}
+              onClick={() => onSectionChange(section.id)}
+              className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
+                activeSection === section.id
+                  ? "bg-blue-50 text-blue-700 border-l-4 border-blue-600"
+                  : "text-gray-700 hover:bg-gray-50"
+              }`}
+            >
+              <span>{section.icon}</span>
+              <span>{section.label}</span>
+            </button>
+          ))}
+        </nav>
+      </div>
+    </aside>
+  );
+}