From 734044d73b75cc705cd7a488645b128185588b1a Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Fri, 22 Aug 2025 16:37:02 +0200
Subject: [PATCH] refactor: style of tabs admin

---
 components/admin/utils/admin-header.tsx | 54 ++++++++++++++++---------
 1 file changed, 36 insertions(+), 18 deletions(-)

diff --git a/components/admin/utils/admin-header.tsx b/components/admin/utils/admin-header.tsx
index 0358c49..082c3cc 100644
--- a/components/admin/utils/admin-header.tsx
+++ b/components/admin/utils/admin-header.tsx
@@ -2,9 +2,15 @@
 
 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">
@@ -22,24 +28,36 @@ export function AdminHeader() {
       </p>
 
       <div className="flex justify-center gap-4 pt-4">
-        <Link href="/admin">
-          <Button
-            variant="outline"
-            className="border-white/20 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="outline"
-            className="border-white/20 text-white hover:bg-white/10"
-          >
-            <Settings className="w-4 h-4 mr-2" />
-            Gestion
-          </Button>
-        </Link>
+        <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>
   );