reafctor: pages for management and split components

components/admin/layout/manage-navigation.tsx

@@ -0,0 +1,58 @@
+"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>
+  );
+}