File size: 2,666 Bytes
0f2f80a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | import React from 'react';
import { useTranslation } from 'react-i18next';
import { ChevronDown } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
const languages = [
{ code: 'en', label: 'English', flag: '🇺🇸' },
{ code: 'fr', label: 'Français', flag: '🇫🇷' },
{ code: 'es', label: 'Español', flag: '🇪🇸' },
{ code: 'pt', label: 'Português', flag: '🇵🇹' }
];
export default function LanguageSwitcher() {
const { i18n } = useTranslation();
const [isOpen, setIsOpen] = React.useState(false);
const currentLanguage = languages.find(l => l.code === i18n.language) || languages[1];
const changeLanguage = (code: string) => {
i18n.changeLanguage(code);
setIsOpen(false);
};
return (
<div className="relative">
<button
onClick={() => setIsOpen(!isOpen)}
className="flex items-center gap-2 px-3 py-2 text-slate-300 hover:text-white transition bg-slate-800 rounded-xl text-xs w-full justify-between"
>
<div className="flex items-center gap-2">
<span>{currentLanguage.flag}</span>
<span className="font-medium">{currentLanguage.label}</span>
</div>
<ChevronDown className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
</button>
<AnimatePresence>
{isOpen && (
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 10 }}
className="absolute bottom-full left-0 right-0 mb-2 bg-slate-800 border border-slate-700 rounded-xl overflow-hidden shadow-xl z-50"
>
{languages.map((lang) => (
<button
key={lang.code}
onClick={() => changeLanguage(lang.code)}
className={`w-full flex items-center gap-3 px-4 py-2.5 text-xs text-left transition hover:bg-slate-700 ${
i18n.language === lang.code ? 'text-white bg-slate-700/50' : 'text-slate-400'
}`}
>
<span>{lang.flag}</span>
<span>{lang.label}</span>
</button>
))}
</motion.div>
)}
</AnimatePresence>
</div>
);
}
|