Add language names (#198)

.prettierrc

@@ -8,5 +8,6 @@
   "trailingComma": "es5",
   "bracketSpacing": true,
   "jsxBracketSameLine": false,
-  "arrowParens": "always"
+  "arrowParens": "always",
+  "quoteProps": "consistent"
 }

public/locales/zh

@@ -0,0 +1 @@
+zh-CN

src/components/LanguageSelector/LanguageSelector.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import DownChevronArrow from '@icon/DownChevronArrow';
-import { i18nLanguages } from '@src/i18n';
+import { languageCodeToName, selectableLanguages } from '@constants/language';
 
 const LanguageSelector = () => {
   const { i18n } = useTranslation();
@@ -11,24 +11,25 @@ const LanguageSelector = () => {
   return (
     <div className='prose dark:prose-invert relative'>
       <button
-        className='btn btn-neutral btn-small flex w-32 flex justify-between'
+        className='btn btn-neutral btn-small w-36 flex justify-between'
         type='button'
         onClick={() => setDropDown((prev) => !prev)}
       >
-        {i18n.language}
+        {languageCodeToName[i18n.language as keyof typeof languageCodeToName] ??
+          i18n.language}
         <DownChevronArrow />
       </button>
       <div
         id='dropdown'
         className={`${
           dropDown ? '' : 'hidden'
-        } absolute top-100 bottom-100 z-10 bg-white rounded-lg shadow-xl border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group dark:bg-gray-800 opacity-90 w-32`}
+        } absolute top-100 bottom-100 z-10 bg-white rounded-lg shadow-xl border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group dark:bg-gray-800 opacity-90 w-36`}
       >
         <ul
-          className='text-sm text-gray-700 dark:text-gray-200 p-0 m-0'
+          className='text-sm text-gray-700 dark:text-gray-200 p-0 m-0 max-h-72 overflow-auto'
           aria-labelledby='dropdownDefaultButton'
         >
-          {i18nLanguages.map((lang) => (
+          {selectableLanguages.map((lang) => (
             <li
               className='px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer'
               onClick={() => {
@@ -37,7 +38,7 @@ const LanguageSelector = () => {
               }}
               key={lang}
             >
-              {lang}
+              {languageCodeToName[lang]}
             </li>
           ))}
         </ul>

src/constants/language.ts

@@ -0,0 +1,67 @@
+// languages that have translation files in `public/locales`
+export const i18nLanguages = [
+  // 'ar',
+  'da',
+  'en',
+  'en-GB',
+  'en-US',
+  'es',
+  'fr',
+  'fr-FR',
+  'it',
+  'ja',
+  'ms',
+  'nb',
+  'sv',
+  // 'ug',
+  'yue',
+  'zh',
+  'zh-CN',
+  'zh-HK',
+  'zh-TW',
+] as const;
+
+// languages that are selectable on the web page
+export const selectableLanguages = [
+  // 'ar',
+  'da',
+  // 'en',
+  'en-GB',
+  'en-US',
+  'es',
+  // 'fr',
+  'fr-FR',
+  'it',
+  'ja',
+  'ms',
+  'nb',
+  'sv',
+  // 'ug',
+  'yue',
+  // 'zh',
+  'zh-CN',
+  // 'zh-HK',
+  'zh-TW',
+] as const;
+
+export const languageCodeToName = {
+  // 'ar': 'العربية',
+  'da': 'Dansk',
+  'en': 'English',
+  'en-GB': 'English (UK)',
+  'en-US': 'English (US)',
+  'es': 'Español',
+  'fr': 'Français',
+  'fr-FR': 'Français', // Français (France). no need to include "France" at this time, as there is currently only one variant
+  'it': 'Italiano',
+  'ja': '日本語',
+  'ms': 'Bahasa Melayu',
+  'nb': 'Norsk bokmål',
+  'sv': 'Svenska',
+  // 'ug': 'ئۇيغۇرچە',
+  'yue': '廣東話',
+  'zh': '中文',
+  'zh-CN': '中文（简体）',
+  'zh-HK': '廣東話', // 中文（香港）. currently there is no support for `zh-HK`, so `zh-HK` will be regarded as `yue`
+  'zh-TW': '中文（台灣）',
+};

src/i18n.ts

@@ -4,27 +4,6 @@ import { initReactI18next } from 'react-i18next';
 import Backend from 'i18next-http-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
 
-export const i18nLanguages = [
-  // 'ar',
-  'da',
-  'en',
-  'en-GB',
-  'en-US',
-  'es',
-  'fr',
-  'fr-FR',
-  'it',
-  'ja',
-  'ms',
-  'nb',
-  'sv',
-  // 'ug',
-  'yue',
-  'zh-CN',
-  'zh-HK',
-  'zh-TW',
-];
-
 i18n
   .use(Backend)
   .use(LanguageDetector)