42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
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>
|
|
);
|
|
}
|