File size: 2,823 Bytes
d8e039b f479a01 d8e039b 34e4e29 f479a01 34e4e29 d8e039b 34e4e29 6c45e39 d8e039b 34e4e29 d8e039b 6c45e39 1c47f1e d8e039b 6a50e97 d8e039b 6a50e97 d8e039b 6a50e97 d8e039b 6a50e97 f479a01 6a50e97 47f57e6 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 92 93 94 95 96 97 98 99 100 101 102 |
import { Link, useLocation } from 'react-router-dom'
import { cn } from '@/lib/utils'
import {
BookOpen,
MessageSquare,
Settings,
Brain,
ArrowLeft
} from 'lucide-react'
const navigation = [
{
name: 'Templates',
href: '/templates',
icon: Brain,
description: 'Browse assistant templates and examples'
},
{
name: 'Assistant Studio',
href: '/playground',
icon: MessageSquare,
description: 'Build, test and refine your AI assistants'
},
{
name: 'Model Catalog',
href: '/models',
icon: BookOpen,
description: 'Browse and manage AI 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">
{/* Back to Home */}
<div>
<Link
to="/"
className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all hover:bg-accent text-muted-foreground hover:text-foreground"
>
<ArrowLeft className="h-4 w-4" />
<span>Back to Home</span>
</Link>
</div>
<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>
)
}
|