[#38] Add a small language switcher component

public/locales/en/translation.json

@@ -3,6 +3,10 @@
     "error_title": "Error",
     "error_icon_alt": "Error sign icon"
   },
+  "language_switch": {
+    "en": "English",
+    "fr": "French"
+  },
   "login": {
     "title": "Sign in to Nimble",
     "email": "Email",

public/locales/fr/translation.json

@@ -0,0 +1,24 @@
+{
+  "base_alert": {
+    "error_title": "Erreur",
+    "error_icon_alt": "Icone indiquant une erreur"
+  },
+  "language_switch": {
+    "en": "Anglais",
+    "fr": "Français"
+  },
+  "login": {
+    "title": "Se connecter à Nimble",
+    "email": "Email",
+    "password": "Mot de passe",
+    "submit": "Se connecter",
+    "errors": {
+      "email_required": "Veuillez saisir votre email.",
+      "email_invalid": "L'email saisi n'est pas valid.",
+      "password_required": "Veuillez saisir votre mot de passe.",
+      "password_too_long": "Le mot de passe ne doit pas dépasser les 32 caractères.",
+      "password_too_short": "Le mot de passe doit faire au minimum 8 caractères."
+    },
+    "nimble_logo_alt": "Logo de Nimble"
+  }
+}

src/App.tsx

@@ -1,13 +1,15 @@
 import { Component } from 'react';
 import './assets/stylesheets/application.scss';
 import BackgroundImage from './components/BackgroundImage';
+import LanguageSwitch from './components/LanguageSwitch';
 import LoginScreen from './screens/Login';
 
 export default class App extends Component {
   render() {
     return (
       <div className="application">
         <BackgroundImage />
+        <LanguageSwitch />
         <LoginScreen />
       </div>
     );

src/components/LanguageSwitch/index.tsx

@@ -0,0 +1,30 @@
+import { useTranslation } from 'react-i18next';
+
+const LanguageSwitch = () => {
+  const { t, i18n } = useTranslation();
+
+  const changeLanguage = (language: string): void => {
+    i18n.changeLanguage(language);
+  };
+
+  return (
+    <ul className="language-switch">
+      {i18n.languages.map((language) => {
+        return (
+          <li key={language}>
+            <a
+              onClick={() => {
+                changeLanguage(language);
+              }}
+              data-lang={language}
+            >
+              {t(`language_switch.${language}`)}
+            </a>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+export default LanguageSwitch;