mirror of https://github.com/usememos/memos.git
42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { GlobeIcon } from "lucide-react";
|
|
import { FC } from "react";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { locales } from "@/i18n";
|
|
import { getLocaleDisplayName, loadLocale } from "@/utils/i18n";
|
|
|
|
interface Props {
|
|
value: Locale;
|
|
onChange: (locale: Locale) => void;
|
|
}
|
|
|
|
const LocaleSelect: FC<Props> = (props: Props) => {
|
|
const { onChange, value } = props;
|
|
|
|
const handleSelectChange = async (locale: Locale) => {
|
|
// Apply locale globally immediately
|
|
loadLocale(locale);
|
|
// Also notify parent component
|
|
onChange(locale);
|
|
};
|
|
|
|
return (
|
|
<Select value={value} onValueChange={handleSelectChange}>
|
|
<SelectTrigger>
|
|
<div className="flex items-center gap-2">
|
|
<GlobeIcon className="w-4 h-auto" />
|
|
<SelectValue placeholder="Select language" />
|
|
</div>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{locales.map((locale) => (
|
|
<SelectItem key={locale} value={locale}>
|
|
{getLocaleDisplayName(locale)}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
};
|
|
|
|
export default LocaleSelect;
|