File size: 4,093 Bytes
d8e039b 6a50e97 d8e039b 6a50e97 d8e039b 6a50e97 d8e039b 6a50e97 d8e039b 6a50e97 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 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
import { Link, useLocation } from 'react-router-dom'
import { cn } from '@/lib/utils'
import {
Home,
BookOpen,
MessageSquare,
Bot,
Zap,
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: 'Assistants',
href: '/assistants',
icon: Bot,
description: 'Custom AI assistants',
badge: 'Preview'
}
]
const tools = [
{
name: 'Completions',
href: '/completions',
icon: Zap,
description: 'Text completion endpoint'
},
{
name: 'Fine-tuning',
href: '/fine-tuning',
icon: Brain,
description: 'Train custom 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">
<div className="flex items-center gap-2">
{item.name}
{item.badge && (
<span className="px-1.5 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">
{item.badge}
</span>
)}
</div>
</div>
</Link>
)
})}
</nav>
</div>
<div className="px-3">
<h2 className="mb-2 text-xs font-semibold text-muted-foreground uppercase tracking-wide">
Advanced
</h2>
<nav className="space-y-1">
{tools.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" />
{item.name}
</Link>
)
})}
</nav>
</div>
</div>
</div>
)
}
|