diff --git a/packages/web/src/components/LanguageSwitcher.tsx b/packages/web/src/components/LanguageSwitcher.tsx index 8dfc6377..7f4d2376 100644 --- a/packages/web/src/components/LanguageSwitcher.tsx +++ b/packages/web/src/components/LanguageSwitcher.tsx @@ -21,7 +21,7 @@ export default function LanguageSwitcher({ disableHover = false, }: LanguageSwitcherProps) { const { i18n } = useTranslation("ui"); - const { set: setLanguage, currentLanguage } = useLang(); + const { set: setLanguage, current, getSupportedLangs } = useLang(); const handleLanguageChange = useCallback( async (languageCode: LangCode) => { @@ -65,12 +65,12 @@ export default function LanguageSwitcher({ "group-hover:text-gray-900 dark:group-hover:text-white", )} > - {currentLanguage?.name} + {current?.name} - {supportedLanguages.map((language) => ( + {getSupportedLangs.map((language) => ( handleLanguageChange(language.code)} diff --git a/packages/web/src/core/hooks/useLang.ts b/packages/web/src/core/hooks/useLang.ts index 6cc7f748..30282eeb 100644 --- a/packages/web/src/core/hooks/useLang.ts +++ b/packages/web/src/core/hooks/useLang.ts @@ -50,6 +50,11 @@ function useLang() { [i18n.language, i18n.changeLanguage, setLanguageInStorage], ); + const getSupportedLangs = useMemo( + () => supportedLanguages.toSorted((a, b) => a.name.localeCompare(b.name)), + [], + ); + const compare = useCallback( (a: string, b: string) => { return collator.compare(a, b); @@ -57,7 +62,7 @@ function useLang() { [collator], ); - return { compare, set, currentLanguage }; + return { compare, set, current: currentLanguage, getSupportedLangs }; } export default useLang; diff --git a/packages/web/src/i18n-config.ts b/packages/web/src/i18n-config.ts index 08f50ba0..8b8de390 100644 --- a/packages/web/src/i18n-config.ts +++ b/packages/web/src/i18n-config.ts @@ -13,9 +13,10 @@ export type Lang = { export type LangCode = Lang["code"]; export const supportedLanguages: Lang[] = [ + { code: "fi", name: "Suomi", flag: "๐Ÿ‡ซ๐Ÿ‡ฎ" }, { code: "de", name: "Deutsch", flag: "๐Ÿ‡ฉ๐Ÿ‡ช" }, { code: "en", name: "English", flag: "๐Ÿ‡บ๐Ÿ‡ธ" }, - { code: "fi", name: "Suomi", flag: "๐Ÿ‡ซ๐Ÿ‡ฎ" }, + { code: "fr", name: "Franรงais", flag: "๐Ÿ‡ซ๐Ÿ‡ท" }, { code: "sv", name: "Svenska", flag: "๐Ÿ‡ธ๐Ÿ‡ช" }, ]; @@ -41,6 +42,7 @@ i18next fallbackLng: { default: [FALLBACK_LANGUAGE_CODE], fi: ["fi-FI", FALLBACK_LANGUAGE_CODE], + fr: ["fr-FR", FALLBACK_LANGUAGE_CODE], sv: ["sv-SE", FALLBACK_LANGUAGE_CODE], de: ["de-DE", FALLBACK_LANGUAGE_CODE], }, diff --git a/tsconfig.base.json b/tsconfig.base.json index bb8b8c28..d783ccba 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -1,7 +1,7 @@ { "compilerOptions": { - "target": "ES2022", - "lib": ["DOM", "DOM.Iterable", "ES2022"], + "target": "ES2023", + "lib": ["DOM", "DOM.Iterable", "ES2023"], "module": "ESNext", "moduleResolution": "bundler", "strict": true,