52 lines
2.0 KiB
TypeScript
52 lines
2.0 KiB
TypeScript
|
|
import { Activity, MessageSquare, Settings, Bot, Box } from 'lucide-react';
|
|
|
|
interface SidebarProps {
|
|
currentView: string;
|
|
setCurrentView: (view: string) => void;
|
|
}
|
|
|
|
export function Sidebar({ currentView, setCurrentView }: SidebarProps) {
|
|
return (
|
|
<div className="w-12 bg-white border-r border-slate-200 flex flex-col items-center py-4 space-y-6 shadow-sm z-10 shrink-0">
|
|
<div
|
|
className="w-8 h-8 bg-blue-600 rounded-xl flex items-center justify-center text-white shadow-md shadow-blue-200 cursor-pointer hover:bg-blue-700 transition-colors"
|
|
onClick={() => setCurrentView('dashboard')}
|
|
>
|
|
<Activity size={18} />
|
|
</div>
|
|
|
|
<div className="flex flex-col space-y-4 flex-1 mt-8">
|
|
<button
|
|
onClick={() => setCurrentView('dashboard')}
|
|
className={`p-1.5 rounded-lg transition-colors ${currentView === 'dashboard' ? 'text-blue-600 bg-blue-50' : 'text-slate-400 hover:text-blue-500 hover:bg-blue-50'}`}
|
|
title="Chat"
|
|
>
|
|
<MessageSquare size={18} />
|
|
</button>
|
|
<button
|
|
onClick={() => setCurrentView('agent')}
|
|
className={`p-1.5 rounded-lg transition-colors ${currentView === 'agent' ? 'text-blue-600 bg-blue-50' : 'text-slate-400 hover:text-blue-500 hover:bg-blue-50'}`}
|
|
title="Agents"
|
|
>
|
|
<Bot size={18} />
|
|
</button>
|
|
<button
|
|
onClick={() => setCurrentView('resource')}
|
|
className={`p-1.5 rounded-lg transition-colors ${currentView === 'resource' ? 'text-blue-600 bg-blue-50' : 'text-slate-400 hover:text-blue-500 hover:bg-blue-50'}`}
|
|
title="Resources"
|
|
>
|
|
<Box size={18} />
|
|
</button>
|
|
<button
|
|
onClick={() => setCurrentView('settings')}
|
|
className={`p-1.5 rounded-lg transition-colors ${currentView === 'settings' ? 'text-blue-600 bg-blue-50' : 'text-slate-400 hover:text-blue-500 hover:bg-blue-50'}`}
|
|
title="Settings"
|
|
>
|
|
<Settings size={18} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|