feat: prefix language name with language flag emoji using language-fl…

…ag-colors
yassinedoghri · Apr 29, 2022 · 7e09d93 · 7e09d93
1 parent a480914
commit 7e09d93
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,7 +46,8 @@
   },
   "dependencies": {
     "i18next": "^21.6.16",
-    "iso-639-1": "^2.1.13"
+    "iso-639-1": "^2.1.13",
+    "language-flag-colors": "^2.0.4"
   },
   "devDependencies": {
     "@commitlint/cli": "^16.2.4",

diff --git a/src/LanguageSelector.astro b/src/LanguageSelector.astro
@@ -1,21 +1,25 @@
 ---
 import i18next from "i18next";
 import ISO6391 from "iso-639-1";
+import { getEmoji } from "language-flag-colors";
 
 export interface Props {
   className?: string;
 }
 
 const supportedLanguages = i18next.languages;
 const currentLanguage = i18next.language;
+const baseLanguage = "en";
 
 const { className } = Astro.props;
 ---
 
 <select onchange="location = this.value;" class={className}>
   {supportedLanguages.map((supportedLanguage: string) => {
-    const value = supportedLanguage === "en" ? "/" : supportedLanguage
-    const label = ISO6391.getNativeName(supportedLanguage)
+    const value = supportedLanguage === baseLanguage ? "/" : supportedLanguage
+    const label = `${getEmoji(supportedLanguage)} ${ISO6391.getNativeName(
+      supportedLanguage
+    )}`
 
     return (
       <option value={value} selected={supportedLanguage === currentLanguage}>