- Dashboard and bundle configuration.
+
+ {{ t('settingsDescription') }}
+
+
+
+
+
+ {{ t('settingsLanguageHint') }}
+
+
+
diff --git a/src/shared/countries.ts b/src/shared/countries.ts
index 96cefdc..d8f9159 100644
--- a/src/shared/countries.ts
+++ b/src/shared/countries.ts
@@ -7,18 +7,38 @@ export interface CountryOption {
const baseCountries = getData();
-export const countryOptions: CountryOption[] = baseCountries
- .map((country: CountryRecord) => ({
- value: country.code,
- label: country.name,
- }))
- .sort((a: CountryOption, b: CountryOption) => a.label.localeCompare(b.label));
+const optionsCache = new Map
();
+
+const getDisplayNames = (locale: string) => {
+ try {
+ return new Intl.DisplayNames([locale], { type: 'region' });
+ } catch {
+ return null;
+ }
+};
+
+export const getCountryOptions = (locale = 'en'): CountryOption[] => {
+ if (optionsCache.has(locale)) {
+ return optionsCache.get(locale)!;
+ }
+
+ const displayNames = getDisplayNames(locale);
+ const options = baseCountries
+ .map((country: CountryRecord) => ({
+ value: country.code,
+ label: displayNames?.of(country.code) ?? country.name,
+ }))
+ .sort((a: CountryOption, b: CountryOption) => a.label.localeCompare(b.label));
+
+ optionsCache.set(locale, options);
+ return options;
+};
const countryByCode = new Map(
- countryOptions.map((country) => [country.value.toUpperCase(), country.label]),
+ baseCountries.map((country) => [country.code.toUpperCase(), country.name]),
);
const countryByName = new Map(
- countryOptions.map((country) => [country.label.toLowerCase(), country.value]),
+ baseCountries.map((country) => [country.name.toLowerCase(), country.code]),
);
export const resolveCountryCode = (value?: string) => {
@@ -37,7 +57,7 @@ export const resolveCountryCode = (value?: string) => {
return byName ?? '';
};
-export const getCountryLabel = (value?: string) => {
+export const getCountryLabel = (value?: string, locale = 'en') => {
if (!value) {
return '';
}
@@ -45,5 +65,7 @@ export const getCountryLabel = (value?: string) => {
if (!resolved) {
return value;
}
- return countryByCode.get(resolved) ?? value;
+
+ const match = getCountryOptions(locale).find((country) => country.value === resolved);
+ return match?.label ?? countryByCode.get(resolved) ?? value;
};