openrag/frontend/components/navigation.tsx

69 lines
No EOL
1.9 KiB
TypeScript

"use client"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Search, Settings, MessageCircle, PlugZap, BookOpenCheck } from "lucide-react"
import { cn } from "@/lib/utils"
export function Navigation() {
const pathname = usePathname()
const routes = [
{
label: "Ingest",
icon: Settings,
href: "/admin",
active: pathname === "/admin",
},
{
label: "Search",
icon: Search,
href: "/",
active: pathname === "/",
},
{
label: "Chat",
icon: MessageCircle,
href: "/chat",
active: pathname === "/chat",
},
{
label: "Knowledge Filters",
icon: BookOpenCheck,
href: "/knowledge-filters",
active: pathname.startsWith("/knowledge-filters"),
},
{
label: "Connectors",
icon: PlugZap,
href: "/connectors",
active: pathname.startsWith("/connectors"),
},
]
return (
<div className="space-y-4 py-4 flex flex-col h-full bg-card">
<div className="px-3 py-2 flex-1">
<div className="space-y-1">
{routes.map((route) => (
<Link
key={route.href}
href={route.href}
className={cn(
"text-sm group flex p-3 w-full justify-start font-medium cursor-pointer hover:bg-accent hover:text-accent-foreground rounded-lg transition-all",
route.active
? "bg-accent text-accent-foreground shadow-sm"
: "text-muted-foreground hover:text-foreground",
)}
>
<div className="flex items-center flex-1">
<route.icon className={cn("h-4 w-4 mr-3 shrink-0", route.active ? "text-accent-foreground" : "text-muted-foreground group-hover:text-foreground")} />
{route.label}
</div>
</Link>
))}
</div>
</div>
</div>
)
}