Files
peakskills/components/admin/utils/admin-header.tsx
2025-08-22 16:37:02 +02:00

65 lines
2.2 KiB
TypeScript

"use client";
import { Building2, Settings } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Button } from "@/components/ui/button";
export function AdminHeader() {
const pathname = usePathname();
const isOverviewActive = pathname === "/admin";
const isManageActive = pathname === "/admin/manage";
return (
<div className="text-center space-y-4 mb-12">
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm">
<Building2 className="h-4 w-4 text-blue-400" />
<span className="text-sm font-medium text-slate-200">
Administration
</span>
</div>
<h1 className="text-4xl font-bold text-white">Dashboard Managérial</h1>
<p className="text-slate-400 max-w-2xl mx-auto leading-relaxed">
Vue d'ensemble des compétences par équipe et direction pour pilotage
stratégique
</p>
<div className="flex justify-center gap-4 pt-4">
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-1">
<div className="flex">
<Link href="/admin">
<Button
variant="ghost"
className={`px-4 py-2 rounded-xl transition-colors ${
isOverviewActive
? "bg-white/20 text-white shadow-sm"
: "text-slate-400 hover:text-white hover:bg-white/10"
}`}
>
<Building2 className="w-4 h-4 mr-2" />
Vue d'ensemble
</Button>
</Link>
<Link href="/admin/manage">
<Button
variant="ghost"
className={`px-4 py-2 rounded-xl transition-colors ${
isManageActive
? "bg-white/20 text-white shadow-sm"
: "text-slate-400 hover:text-white hover:bg-white/10"
}`}
>
<Settings className="w-4 h-4 mr-2" />
Gestion
</Button>
</Link>
</div>
</div>
</div>
</div>
);
}