47 lines
1.6 KiB
TypeScript
47 lines
1.6 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">
|
|
<Globe className="h-4 w-4" />
|
|
<span className="sr-only">Toggle language</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
{locales.map((l) => (
|
|
<DropdownMenuItem
|
|
key={l.code}
|
|
onClick={() => setLocale(l.code)}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<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>
|
|
);
|
|
}
|