JavaScript 56.7%
TypeScript 42.6%
1"use client";23import { motion, AnimatePresence } from "framer-motion";4import { Sun, Moon } from "lucide-react";5import { useTheme } from "./ThemeProvider";67interface ThemeToggleProps {8 className?: string;9 size?: "sm" | "md";10}1112export default function ThemeToggle({ className = "", size = "md" }: ThemeToggleProps) {13 const { theme, toggleTheme } = useTheme();14 const dim = size === "sm" ? "w-9 h-9 min-w-[36px] min-h-[36px]" : "w-10 h-10 min-w-[40px] min-h-[40px]";1516 return (17 <motion.button18 whileTap={{ scale: 0.9 }}19 onClick={toggleTheme}20 className={`relative flex items-center justify-center ${dim} rounded-xl transition-colors text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-white/10 ${className}`}21 title={theme === "dark" ? "Passer en mode clair" : "Passer en mode sombre"}22 aria-label={theme === "dark" ? "Mode clair" : "Mode sombre"}23 >24 <AnimatePresence mode="wait" initial={false}>25 <motion.span26 key={theme}27 initial={{ rotate: -60, opacity: 0, scale: 0.7 }}28 animate={{ rotate: 0, opacity: 1, scale: 1 }}29 exit={{ rotate: 60, opacity: 0, scale: 0.7 }}30 transition={{ duration: 0.2 }}31 className="flex"32 >33 {theme === "dark" ? <Sun className="w-[18px] h-[18px]" /> : <Moon className="w-[18px] h-[18px]" />}34 </motion.span>35 </AnimatePresence>36 </motion.button>37 );38}39