37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
import { Dropdown } from "@/components/Dropdown";
|
|
import { FlagIcon } from "@/components/FlagIcon";
|
|
import { Heading1 } from "@/components/utils/Text";
|
|
import { appLanguageOptions } from "@/setup/i18n";
|
|
import { useLanguageStore } from "@/stores/language";
|
|
import { sortLangCodes } from "@/utils/sortLangCodes";
|
|
|
|
export function LocalePart() {
|
|
const sorted = sortLangCodes(appLanguageOptions.map((t) => t.id));
|
|
const { language, setLanguage } = useLanguageStore();
|
|
|
|
const options = appLanguageOptions
|
|
.sort((a, b) => sorted.indexOf(a.id) - sorted.indexOf(b.id))
|
|
.map((opt) => ({
|
|
id: opt.id,
|
|
name: `${opt.englishName} — ${opt.nativeName}`,
|
|
leftIcon: <FlagIcon countryCode={opt.id} />,
|
|
}));
|
|
|
|
const selected = options.find((t) => t.id === language);
|
|
|
|
return (
|
|
<div>
|
|
<Heading1 border>Locale</Heading1>
|
|
<p className="text-white font-bold mb-3">Application language</p>
|
|
<p className="max-w-[20rem] font-medium">
|
|
Language applied to the entire application.
|
|
</p>
|
|
<Dropdown
|
|
options={options}
|
|
selectedItem={selected || options[0]}
|
|
setSelectedItem={(opt) => setLanguage(opt.id)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|