LathanDevers
52 lines
2.1 KiB
TypeScript
52 lines
2.1 KiB
TypeScript
import { Sun, Moon } from "lucide-react";
|
|
import { cn } from "@utils/utils";
|
|
|
|
interface ThemeToggleProps {
|
|
isDark: boolean;
|
|
toggleTheme: () => void;
|
|
}
|
|
|
|
export function ThemeToggle({ isDark, toggleTheme }: ThemeToggleProps) {
|
|
|
|
const lightInset = "shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]";
|
|
const darkInset = "dark:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]";
|
|
|
|
const lightExtrude = "shadow-[3px_3px_6px_#c5c5c5,-3px_-3px_6px_#ffffff]";
|
|
const darkExtrude = "dark:shadow-[3px_3px_6px_#121926,-3px_-3px_6px_#2a3850]";
|
|
|
|
return (
|
|
<button
|
|
onClick={toggleTheme}
|
|
// 1. On ajoute la transition globale sur le fond du bouton principal
|
|
className="group relative flex items-center w-20 h-10 rounded-full bg-[#e8e8e8] dark:bg-[#1e293b] outline-none cursor-pointer shrink-0 transition-all duration-300 ease-in-out"
|
|
aria-label="Basculer le thème"
|
|
>
|
|
{/* 2. Le Rail : On s'assure qu'il est bien à 300ms ease-in-out */}
|
|
<div className={cn(
|
|
"absolute inset-0 rounded-full transition-all duration-300 ease-in-out",
|
|
lightInset, darkInset
|
|
)}></div>
|
|
|
|
{/* 3. La Bille : On remplace 'transition-transform duration-500' par la transition globale */}
|
|
<div className={cn(
|
|
"absolute left-1 w-8 h-8 rounded-full bg-[#e8e8e8] dark:bg-[#1e293b] z-10 flex items-center justify-center",
|
|
"transition-all duration-300 ease-in-out", // <-- LA CORRECTION EST ICI
|
|
lightExtrude, darkExtrude,
|
|
isDark ? "translate-x-10" : "translate-x-0"
|
|
)}>
|
|
|
|
{/* 4. Les icônes : On les passe aussi à 300ms pour que la rotation suive le mouvement */}
|
|
<Sun className={cn(
|
|
"absolute w-4 h-4 text-amber-500 transition-all duration-300 ease-in-out",
|
|
isDark ? "opacity-0 rotate-90 scale-50" : "opacity-100 rotate-0 scale-100"
|
|
)} strokeWidth={2.5} />
|
|
|
|
<Moon className={cn(
|
|
"absolute w-4 h-4 text-indigo-400 transition-all duration-300 ease-in-out",
|
|
isDark ? "opacity-100 rotate-0 scale-100" : "opacity-0 -rotate-90 scale-50"
|
|
)} strokeWidth={2.5} />
|
|
|
|
</div>
|
|
</button>
|
|
);
|
|
} |