Spaces:
Sleeping
Sleeping
File size: 2,181 Bytes
f927995 196bcb1 f927995 | 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 57 58 59 | import { NavLink, Outlet } from 'react-router-dom';
import {
LayoutDashboard, Pill, Bell, Network, MessageSquare, Zap, Shield,
} from 'lucide-react';
const NAV = [
{ to: '/', icon: LayoutDashboard, label: 'Dashboard' },
{ to: '/drugs', icon: Pill, label: 'Drugs' },
{ to: '/alerts', icon: Bell, label: 'Alerts' },
{ to: '/graph', icon: Network, label: 'Graph' },
{ to: '/query', icon: MessageSquare, label: 'AI Analyst' },
{ to: '/simulate', icon: Zap, label: 'Simulate' },
];
export default function Layout() {
return (
<div className="flex h-screen overflow-hidden bg-background text-white font-sans">
{/* Sidebar */}
<aside className="w-56 flex-shrink-0 flex flex-col border-r border-white/[0.06] bg-surface">
<div className="flex items-center gap-3 px-5 py-5 border-b border-white/[0.06]">
<div className="w-8 h-8 rounded-lg bg-primary/20 border border-primary/40 flex items-center justify-center">
<Shield className="w-4 h-4 text-primary" />
</div>
<span className="font-semibold text-sm tracking-wide">ShockMap</span>
</div>
<nav className="flex-1 py-4 space-y-0.5 px-2">
{NAV.map(({ to, icon: Icon, label }) => (
<NavLink
key={to}
to={to}
end={to === '/'}
className={({ isActive }) =>
`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors ${
isActive
? 'bg-primary/15 text-primary font-medium'
: 'text-muted hover:text-white hover:bg-white/[0.04]'
}`
}
>
<Icon className="w-4 h-4 flex-shrink-0" />
{label}
</NavLink>
))}
</nav>
<div className="px-4 py-4 border-t border-white/[0.06]">
<p className="text-xs text-muted/60">MVP · v1.0.0</p>
</div>
</aside>
{/* Main Content */}
<main className="flex-1 overflow-y-auto">
<Outlet />
</main>
</div>
);
}
|