56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
import { useState } from 'react';
|
|
import { motion, AnimatePresence } from 'motion/react';
|
|
import { Globe, ChevronDown } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const languages = [
|
|
{ code: 'pt', label: 'PT-BR' },
|
|
{ code: 'en', label: 'ENG' },
|
|
{ code: 'es', label: 'ESP' },
|
|
];
|
|
|
|
export default function LanguageSelector() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [selected, setSelected] = useState(languages[0]);
|
|
|
|
return (
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="flex items-center gap-2 text-sm font-medium text-gray-400 hover:text-white transition-colors px-3 py-2 rounded-full hover:bg-white/5"
|
|
>
|
|
<Globe className="w-4 h-4" />
|
|
{selected.label}
|
|
<ChevronDown className={cn("w-4 h-4 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 }}
|
|
transition={{ duration: 0.2 }}
|
|
className="absolute top-full right-0 mt-2 w-32 bg-black/90 backdrop-blur-xl border border-white/10 rounded-[16px] overflow-hidden shadow-2xl z-50 flex flex-col p-1"
|
|
>
|
|
{languages.map((lang) => (
|
|
<button
|
|
key={lang.code}
|
|
onClick={() => {
|
|
setSelected(lang);
|
|
setIsOpen(false);
|
|
}}
|
|
className={cn(
|
|
"w-full text-left px-4 py-2.5 text-sm transition-colors rounded-[12px]",
|
|
selected.code === lang.code ? "text-white font-medium bg-white/10" : "text-gray-400 hover:bg-white/5 hover:text-white"
|
|
)}
|
|
>
|
|
{lang.label}
|
|
</button>
|
|
))}
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
}
|