refactor: style of tabs admin

This commit is contained in:
Julien Froidefond
2025-08-22 16:37:02 +02:00
parent a08caf2981
commit 734044d73b

View File

@@ -2,9 +2,15 @@
import { Building2, Settings } from "lucide-react"; import { Building2, Settings } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
export function AdminHeader() { export function AdminHeader() {
const pathname = usePathname();
const isOverviewActive = pathname === "/admin";
const isManageActive = pathname === "/admin/manage";
return ( return (
<div className="text-center space-y-4 mb-12"> <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"> <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm">
@@ -22,24 +28,36 @@ export function AdminHeader() {
</p> </p>
<div className="flex justify-center gap-4 pt-4"> <div className="flex justify-center gap-4 pt-4">
<Link href="/admin"> <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-1">
<Button <div className="flex">
variant="outline" <Link href="/admin">
className="border-white/20 text-white hover:bg-white/10" <Button
> variant="ghost"
<Building2 className="w-4 h-4 mr-2" /> className={`px-4 py-2 rounded-xl transition-colors ${
Vue d'ensemble isOverviewActive
</Button> ? "bg-white/20 text-white shadow-sm"
</Link> : "text-slate-400 hover:text-white hover:bg-white/10"
<Link href="/admin/manage"> }`}
<Button >
variant="outline" <Building2 className="w-4 h-4 mr-2" />
className="border-white/20 text-white hover:bg-white/10" Vue d'ensemble
> </Button>
<Settings className="w-4 h-4 mr-2" /> </Link>
Gestion <Link href="/admin/manage">
</Button> <Button
</Link> 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>
</div> </div>
); );