50 lines
2 KiB
TypeScript
50 lines
2 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslation } from "@/lib/i18n";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Globe } from "lucide-react";
|
|
|
|
export function LanguageSwitcher() {
|
|
const { locale, setLocale } = useTranslation();
|
|
|
|
const locales = [
|
|
{ code: "en" as const, name: "English", flag: "🇺🇸" },
|
|
{ code: "es" as const, name: "Español", flag: "🇪🇸" },
|
|
{ code: "pt-BR" as const, name: "Português", flag: "🇧🇷" },
|
|
];
|
|
|
|
const currentLocale = locales.find((l) => l.code === locale) || locales[0];
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="sm" className="w-12 px-0 gap-2 focus-visible:ring-0 focus-visible:ring-offset-0 hover:bg-white/10">
|
|
<Globe className="h-5 w-5 text-white/90 hover:text-white transition-colors" />
|
|
<span className="sr-only">Toggle language</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
{locales.map((l) => (
|
|
<DropdownMenuItem
|
|
key={l.code}
|
|
onSelect={() => {
|
|
console.log(`[LanguageSwitcher] Selecting ${l.code}`);
|
|
setLocale(l.code);
|
|
}}
|
|
className="flex items-center gap-2 cursor-pointer focus:outline-none focus:bg-accent focus:text-accent-foreground"
|
|
>
|
|
<span className="text-lg">{l.flag}</span>
|
|
<span>{l.name}</span>
|
|
{locale === l.code && <span className="ml-auto text-xs opacity-50">✓</span>}
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|