File size: 2,035 Bytes
84b6aa6 44aca07 84b6aa6 447f05f 84b6aa6 447f05f 84b6aa6 447f05f 84b6aa6 447f05f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | import React from 'react';
import { Activity, MessageSquare, Pill } from 'lucide-react';
interface SidebarProps {
activeTab: 'dashboard' | 'chat' | 'medication';
setActiveTab: (tab: 'dashboard' | 'chat' | 'medication') => void;
}
const Sidebar: React.FC<SidebarProps> = ({ activeTab, setActiveTab }) => {
const navItems = [
{ id: 'dashboard', label: 'Dashboard', icon: Activity },
{ id: 'chat', label: 'AI Companion', icon: MessageSquare },
{ id: 'medication', label: 'Meds & Rewards', icon: Pill },
] as const;
return (
<aside className="hidden md:flex flex-col w-64 h-screen fixed glass-panel border-r border-neon-border z-20 top-0 left-0">
<div className="p-8">
<h1 className="text-2xl font-mono font-bold text-white tracking-tighter flex items-center gap-3">
<div className="p-2 bg-neon-green/10 rounded-lg">
<Activity className="text-neon-green" size={24} />
</div>
SomAI
</h1>
<p className="text-xs text-gray-400 mt-3 font-medium tracking-wide">CLINICAL COMPANION v2.0</p>
</div>
<nav className="flex-1 px-4 space-y-2 mt-4">
{navItems.map((item) => (
<button
key={item.id}
onClick={() => setActiveTab(item.id)}
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 group ${
activeTab === item.id
? 'bg-white/10 text-white border border-white/10 shadow-lg shadow-black/20'
: 'text-gray-400 hover:bg-white/5 hover:text-white'
}`}
>
<item.icon
size={20}
className={`transition-colors ${activeTab === item.id ? 'text-neon-green' : 'text-gray-500 group-hover:text-gray-300'}`}
/>
<span className="font-medium text-sm">{item.label}</span>
</button>
))}
</nav>
<div className="p-6 border-t border-white/5">
<div className="flex items-center gap-3 text-xs text-gray-500 font-mono">
<div className="w-2 h-2 rounded-full bg-neon-green animate-pulse-slow"></div>
SYSTEM ONLINE
</div>
</div>
</aside>
);
};
export default Sidebar; |