🌐 Add languages to i18n

next-i18next.config.js

@@ -3,7 +3,7 @@ module.exports = {
   debug: process.env.NODE_ENV === 'development',
   i18n: {
     defaultLocale: 'en',
-    locales: ['en', 'de'],
+    locales: ['en', 'de', 'es', 'fr', 'it', 'ja', 'nl', 'ru', 'sv', 'zh'],
     localeDetection: true,
   },
   reloadOnPrerender: process.env.NODE_ENV === 'development',

src/components/Settings/LanguageSwitch.tsx

@@ -13,8 +13,8 @@ export default function LanguageSwitch() {
   const { changeLanguage } = i18n;
   const configLocale = getCookie('config-locale');
   const { locale, locales } = useRouter();
-  const [selectedLanguage, setSelectedLanguage] = useState<string | undefined>(
-    (configLocale as string) ?? locale
+  const [selectedLanguage, setSelectedLanguage] = useState<string>(
+    (configLocale as string) ?? locale ?? 'en'
   );
 
   const data = locales
@@ -57,7 +57,7 @@ export default function LanguageSwitch() {
   return (
     <Stack>
       <Select
-        icon={<Text>{getUnicodeFlagIcon(selectedLanguage as string)}</Text>}
+        icon={<Text>{getUnicodeFlagIcon(getLanguageByCode(selectedLanguage).shortName)}</Text>}
         label={t('label')}
         data={data}
         itemComponent={SelectItem}
@@ -87,7 +87,7 @@ const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
   ({ language, image, ...others }: ItemProps, ref) => (
     <div ref={ref} {...others}>
       <Group noWrap>
-        <Text>{getUnicodeFlagIcon(language.originalName as string)}</Text>
+        <Text>{getUnicodeFlagIcon(language.shortName)}</Text>
 
         <div>
           <Text size="sm">

src/languages/language.ts

@@ -21,6 +21,46 @@ const languages: Language[] = [
     originalName: 'English',
     translatedName: 'English',
   },
+  {
+    shortName: 'es',
+    originalName: 'Español',
+    translatedName: 'Spanish',
+  },
+  {
+    shortName: 'fr',
+    originalName: 'Français',
+    translatedName: 'French',
+  },
+  {
+    shortName: 'it',
+    originalName: 'Italiano',
+    translatedName: 'Italian',
+  },
+  {
+    shortName: 'ja',
+    originalName: '日本語',
+    translatedName: 'Japanese',
+  },
+  {
+    shortName: 'nl',
+    originalName: 'Nederlands',
+    translatedName: 'Dutch',
+  },
+  {
+    shortName: 'ru',
+    originalName: 'Русский',
+    translatedName: 'Russian',
+  },
+  {
+    shortName: 'sv',
+    originalName: 'Svenska',
+    translatedName: 'Swedish',
+  },
+  {
+    shortName: 'zh',
+    originalName: '中文',
+    translatedName: 'Chinese',
+  },
 ];
 
 export const getLanguageByCode = (code: string | null) =>