syoul
0e485aacee
- Installation de next-themes - Création du composant ThemeToggle avec icônes soleil/lune - Intégration du ThemeProvider dans le layout - Ajout du toggle dans la navigation mobile et le header admin - Adaptation des couleurs pour le dark mode (tropical chic) - Mise à jour des composants UI (Card, Button) pour le dark mode - Adaptation des composants principaux (Layout, WifiCard, etc.)
65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { Home, MapPin, Info, Waves } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { ThemeToggle } from "@/components/ThemeToggle";
|
|
|
|
const tabs = [
|
|
{
|
|
name: "Accueil",
|
|
href: "/accueil",
|
|
icon: Home,
|
|
},
|
|
{
|
|
name: "Explorer",
|
|
href: "/explorer",
|
|
icon: MapPin,
|
|
},
|
|
{
|
|
name: "Mana",
|
|
href: "/mana-tracker",
|
|
icon: Waves,
|
|
},
|
|
{
|
|
name: "Infos",
|
|
href: "/infos",
|
|
icon: Info,
|
|
},
|
|
];
|
|
|
|
export default function TabNavigation() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<nav className="fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 shadow-lg">
|
|
<div className="flex items-center justify-around h-16 px-2">
|
|
{tabs.map((tab) => {
|
|
const Icon = tab.icon;
|
|
const isActive = pathname === tab.href;
|
|
return (
|
|
<Link
|
|
key={tab.href}
|
|
href={tab.href}
|
|
className={cn(
|
|
"flex flex-col items-center justify-center gap-1 flex-1 h-full rounded-xl transition-colors",
|
|
isActive
|
|
? "text-primary bg-secondary dark:bg-primary/20"
|
|
: "text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary hover:bg-gray-50 dark:hover:bg-gray-800"
|
|
)}
|
|
>
|
|
<Icon className="h-6 w-6" />
|
|
<span className="text-xs font-medium">{tab.name}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
<div className="flex items-center justify-center h-full px-2">
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|
|
|