init

components/layout/index.ts

@@ -0,0 +1,3 @@
+// Theme and layout components
+export { ThemeProvider } from "./theme-provider";
+export { ThemeToggle } from "./theme-toggle";

components/layout/navigation-wrapper.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { Navigation } from "./navigation";
+import { useUser } from "@/hooks/use-user-context";
+
+export function NavigationWrapper() {
+  const { userInfo } = useUser();
+
+  return <Navigation userInfo={userInfo || undefined} />;
+}

components/layout/navigation.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { ThemeToggle } from "@/components/layout/theme-toggle";
+import { BarChart3, User, Settings } from "lucide-react";
+
+interface NavigationProps {
+  userInfo?: {
+    firstName: string;
+    lastName: string;
+    teamName: string;
+  };
+}
+
+export function Navigation({ userInfo }: NavigationProps = {}) {
+  const pathname = usePathname();
+
+  const navItems = [
+    {
+      href: "/",
+      label: "Tableau de bord",
+      icon: BarChart3,
+    },
+    {
+      href: "/evaluation",
+      label: "Évaluation",
+      icon: User,
+    },
+  ];
+
+  return (
+    <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container mx-auto px-4 h-16 flex items-center justify-between">
+        <div className="flex items-center space-x-6">
+          <Link href="/" className="font-bold text-xl">
+            PeakSkills
+          </Link>
+
+          <nav className="hidden md:flex items-center space-x-4">
+            {navItems.map((item) => {
+              const Icon = item.icon;
+              const isActive = pathname === item.href;
+
+              return (
+                <Button
+                  key={item.href}
+                  variant={isActive ? "default" : "ghost"}
+                  asChild
+                  size="sm"
+                >
+                  <Link href={item.href} className="flex items-center gap-2">
+                    <Icon className="h-4 w-4" />
+                    {item.label}
+                  </Link>
+                </Button>
+              );
+            })}
+          </nav>
+        </div>
+
+        <div className="flex items-center space-x-4">
+          {userInfo && (
+            <div className="flex items-center gap-3 px-3 py-2 rounded-lg bg-muted/50">
+              <div className="w-8 h-8 rounded-full bg-primary/20 border border-primary/30 flex items-center justify-center">
+                <User className="h-4 w-4 text-primary" />
+              </div>
+              <div className="hidden sm:block">
+                <p className="text-sm font-medium">
+                  {userInfo.firstName} {userInfo.lastName}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {userInfo.teamName}
+                </p>
+              </div>
+            </div>
+          )}
+          <ThemeToggle />
+        </div>
+      </div>
+    </header>
+  );
+}

components/layout/theme-provider.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import * as React from 'react'
+import {
+  ThemeProvider as NextThemesProvider,
+  type ThemeProviderProps,
+} from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

components/layout/theme-toggle.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+import { Button } from "@/components/ui/button";
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+      className="h-8 w-8 px-0 text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100"
+    >
+      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Basculer le thème</span>
+    </Button>
+  );
+}