36 lines
1.5 KiB
TypeScript
36 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { ChevronDownIcon } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
|
|
DropdownMenuRadioGroup, DropdownMenuRadioItem,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { languages, isLocale } from "@/lib/i18n/locales";
|
|
import { useTranslation } from "./locale-provider";
|
|
|
|
export function LanguageDropdown() {
|
|
const { locale, setLocale, t } = useTranslation();
|
|
const selected = languages.find((language) => language.code === locale)!;
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger render={<Button variant="outline" size="sm" />} aria-label={t("Language")}>
|
|
<Image src={selected.flag} alt="" aria-hidden width={24} height={16} />
|
|
<span lang={selected.code}>{selected.name}</span>
|
|
<ChevronDownIcon data-icon="inline-end" />
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuRadioGroup value={locale} onValueChange={(value) => { if (isLocale(value)) setLocale(value); }} aria-label={t("Language")}>
|
|
{languages.map((language) => (
|
|
<DropdownMenuRadioItem key={language.code} value={language.code}>
|
|
<Image src={language.flag} alt="" aria-hidden width={24} height={16} />
|
|
<span lang={language.code}>{language.name}</span>
|
|
</DropdownMenuRadioItem>
|
|
))}
|
|
</DropdownMenuRadioGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|