Meilleur design via Shadcn/ui

src/components/Navigation.tsx

@@ -0,0 +1,68 @@
+'use client';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { Home, Settings, Users, FileText, ArrowLeft } from 'lucide-react';
+
+interface NavigationProps {
+  showBackButton?: boolean;
+  backUrl?: string;
+}
+
+export default function Navigation({ showBackButton = false, backUrl = '/' }: NavigationProps) {
+  const pathname = usePathname();
+
+  const isActive = (path: string) => {
+    return pathname === path;
+  };
+
+  return (
+    <Card className="mb-6 border-0 shadow-sm">
+      <div className="p-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-4">
+            {showBackButton && (
+              <Button asChild variant="ghost" size="sm">
+                <Link href={backUrl}>
+                  <ArrowLeft className="w-4 h-4 mr-2" />
+                  Retour
+                </Link>
+              </Button>
+            )}
+            
+            <div className="flex items-center space-x-1">
+              <Button
+                asChild
+                variant={isActive('/') ? 'default' : 'ghost'}
+                size="sm"
+              >
+                <Link href="/">
+                  <Home className="w-4 h-4 mr-2" />
+                  Accueil
+                </Link>
+              </Button>
+              
+              <Button
+                asChild
+                variant={isActive('/admin') ? 'default' : 'ghost'}
+                size="sm"
+              >
+                <Link href="/admin">
+                  <Settings className="w-4 h-4 mr-2" />
+                  Administration
+                </Link>
+              </Button>
+            </div>
+          </div>
+          
+          <div className="flex items-center space-x-2">
+            <div className="text-sm text-slate-600 dark:text-slate-300">
+              Mes Budgets Participatifs
+            </div>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}