File size: 2,424 Bytes
d8e039b 6a50e97 d8e039b 6a50e97 d8e039b 6a50e97 d8e039b 6a50e97 d8e039b 9592d69 d8e039b 9592d69 d8e039b |
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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
import { Link, useLocation } from 'react-router-dom'
import { cn } from '@/lib/utils'
import {
Home,
BookOpen,
MessageSquare,
Settings,
Brain
} from 'lucide-react'
const navigation = [
{
name: 'Home',
href: '/',
icon: Home,
description: 'Overview and getting started'
},
{
name: 'Chat Playground',
href: '/playground',
icon: MessageSquare,
description: 'AI chatbot with conversation history'
},
{
name: 'Model Catalog',
href: '/models',
icon: BookOpen,
description: 'Browse and manage models'
},
{
name: 'Settings',
href: '/settings',
icon: Settings,
description: 'Application settings'
}
]
export function Sidebar() {
const location = useLocation()
return (
<div className="flex h-full flex-col bg-background border-r">
{/* Header */}
<div className="p-6 border-b">
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
<Brain className="h-5 w-5 text-primary-foreground" />
</div>
<div>
<h1 className="font-semibold text-lg">Edge LLM</h1>
<p className="text-xs text-muted-foreground">Local AI Platform</p>
</div>
</div>
</div>
{/* Navigation */}
<div className="flex-1 px-3 py-4 space-y-8">
<div>
<h2 className="mb-2 px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wide">
Get started
</h2>
<nav className="space-y-1">
{navigation.map((item) => {
const isActive = location.pathname === item.href
return (
<Link
key={item.name}
to={item.href}
className={cn(
'flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all hover:bg-accent',
isActive
? 'bg-accent text-accent-foreground font-medium'
: 'text-muted-foreground hover:text-foreground'
)}
>
<item.icon className="h-4 w-4" />
<div className="flex-1">
{item.name}
</div>
</Link>
)
})}
</nav>
</div>
</div>
</div>
)
}
|