✨ update i18n structure

Signed-off-by: Alberto Fernandez <[email protected]>

i18n/en.json

@@ -4,7 +4,10 @@
   },
   "Footer": {
     "copyright": "©️ 2014-2022 Genoma Games. All rights reserved",
-    "scroll_to_top": "Scroll to top"
+    "scroll_to_top": "Scroll to top",
+    "languages": "Languages",
+    "english": "English",
+    "spanish": "Spanish"
   },
   "PaginatedPostsPage": {
     "prev": "Prev",

src/components/footer.tsx

@@ -1,7 +1,10 @@
-import { faArrowUp } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUp, faLanguage } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Link from "next/link";
 import { useTranslations } from "next-intl";
 
+import { languages, locales } from "../i18n";
+
 interface Props {}
 
 const Footer: React.JSXElementConstructor<Props> = () => {
@@ -10,7 +13,30 @@ const Footer: React.JSXElementConstructor<Props> = () => {
   return (
     <footer className="mt-auto h-12 w-full bg-gradient-to-br from-slate-800 to-gray-900 shadow-md shadow-black">
       <div className="container mx-auto flex h-full max-w-5xl items-center px-4">
-        <div className="text-xs text-slate-400">{t("copyright")}</div>
+        <div className="flex items-center">
+          {/* TODO: implements language selector
+          <div>
+            <FontAwesomeIcon
+              size="2xl"
+              icon={faLanguage}
+              title={t("languages")}
+            />
+            {locales.map((locale) => (
+              <>
+                {" "}
+                <Link
+                  className="rounded bg-emerald-600 px-2 py-1 text-center font-bold text-slate-900 transition-colors ease-in-out hover:bg-emerald-400 focus:bg-emerald-400"
+                  key={locale}
+                  href={`/${locale}`}
+                >
+                  {/* @ts-expect-error additional.d.ts cant find this key * /}
+                  {t(languages[locale].i18nKey)}
+                </Link>
+              </>
+            ))}
+          </div> */}
+          <div className="text-xs text-slate-400">{t("copyright")}</div>
+        </div>
         <a
           className="ml-auto flex h-8 w-8 items-center justify-center justify-self-end rounded bg-emerald-800"
           href="#top"

src/i18n.ts

@@ -1,9 +1,29 @@
 import { getRequestConfig } from "next-intl/server";
 
+export enum Locale {
+  en = "en",
+}
+
+interface Language {
+  tag: string;
+  i18nKey: string;
+}
+
 export default getRequestConfig(async ({ locale }) => ({
   messages: (await import(`../i18n/${locale}.json`)).default,
 }));
 
-export const locales = ["en"];
+export const locales: Locale[] = Object.values(Locale);
+
+type Languages = {
+  [Key in Locale]: Language;
+};
+
+export const languages: Languages = {
+  [Locale.en]: {
+    i18nKey: "english",
+    tag: Locale.en,
+  },
+};
 
 export const defaultLocale = "en";