59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { Code2, Users, User } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function ManageNavigation() {
|
|
const pathname = usePathname();
|
|
|
|
const navItems = [
|
|
{
|
|
href: "/admin/manage/skills",
|
|
label: "Gestion des Skills",
|
|
icon: Code2,
|
|
value: "skills",
|
|
},
|
|
{
|
|
href: "/admin/manage/teams",
|
|
label: "Gestion des Teams",
|
|
icon: Users,
|
|
value: "teams",
|
|
},
|
|
{
|
|
href: "/admin/manage/users",
|
|
label: "Gestion des Utilisateurs",
|
|
icon: User,
|
|
value: "users",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-1 mb-6 w-fit mx-auto">
|
|
<div className="grid grid-cols-3 bg-transparent border-0 gap-1">
|
|
{navItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = pathname === item.href;
|
|
|
|
return (
|
|
<Link
|
|
key={item.value}
|
|
href={item.href}
|
|
className={cn(
|
|
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
|
isActive
|
|
? "bg-white/20 text-white"
|
|
: "text-slate-400 hover:text-white hover:bg-white/10"
|
|
)}
|
|
>
|
|
<Icon className="w-4 h-4 mr-2" />
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|