t.indorf
59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { Activity, Building2, ScrollText } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const items = [
|
|
{
|
|
href: "/admin",
|
|
label: "Kitas",
|
|
icon: Building2,
|
|
exact: true,
|
|
},
|
|
{
|
|
href: "/admin/audit",
|
|
label: "AuditLog",
|
|
icon: ScrollText,
|
|
exact: false,
|
|
},
|
|
];
|
|
|
|
export function AdminNav() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<nav className="flex flex-col gap-1 px-3">
|
|
{items.map(({ href, label, icon: Icon, exact }) => {
|
|
const isActive = exact ? pathname === href : pathname.startsWith(href);
|
|
return (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={cn(
|
|
"flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
|
|
isActive
|
|
? "bg-primary text-primary-foreground"
|
|
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4 shrink-0" />
|
|
{label}
|
|
</Link>
|
|
);
|
|
})}
|
|
|
|
<div className="mt-3 border-t px-3 pt-3 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
|
Diagnose
|
|
</div>
|
|
<div className="flex items-center gap-3 rounded-md px-3 py-2 text-sm text-muted-foreground">
|
|
<Activity className="h-4 w-4 shrink-0" />
|
|
Read-only Support
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|
|
|