Add basic styles and Link to locale options

public/locales/en-US/common.json

@@ -1,5 +1,5 @@
 {
-  "language": "Language",
+  "language": "LANGUAGE",
   "signIn": "Sign In",
   "signOut": "Sign Out"
 }

public/locales/es-MX/common.json

@@ -1,5 +1,5 @@
 {
-  "language": "Idioma",
+  "language": "IDIOMA",
   "signIn": "Ingresar",
   "signOut": "Salir"
 }

src/components/LocaleOptions/LocaleOptions.module.css

@@ -0,0 +1,37 @@
+.section {
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+}
+
+.title {
+  font-size: 1.4rem;
+  font-weight: 500;
+  font-style: normal;
+  line-height: 1.8rem;
+  margin-bottom: 4px;
+  color: var(--just-white);
+}
+
+.section a {
+  font-size: 1.4rem;
+  font-weight: 500;
+  font-style: normal;
+  line-height: 1.8rem;
+  padding: 4px;
+  text-decoration: none;
+  color: var(--just-white);
+}
+
+.section a:hover,
+.section a:active,
+.section a:focus {
+  border: 1px solid var(--just-white);
+}
+
+.active {
+  border: 1px solid var(--just-white);
+}

src/components/LocaleOptions/LocaleOptions.tsx

@@ -1,23 +1,35 @@
 import { useTranslation } from 'next-i18next';
+import Link from 'next/link';
 import { useRouter } from 'next/router';
+import styles from './LocaleOptions.module.css';
 
 const LocaleOptions = () => {
-  const { locale, locales } = useRouter();
+  const { locale, locales, asPath } = useRouter();
   const { t } = useTranslation('common');
 
   // Locales aren't configured
   if (locale == undefined || locales == undefined) return null;
 
   return (
-    <>
-      <p>{t('language')}:</p>
-      {locales.map(loc => (
+    <section className={styles.section}>
+      <p className={styles.title}>{t('language')} :</p>
+      {/* Use this code when you want to let user override browser language preference  */}
+      {/* {locales.map(loc => (
         <form action='/api/language' method='POST' key={loc}>
           <input type='hidden' name='preferredLocale' value={loc} />
           <button type='submit'>{loc}</button>
         </form>
-      ))}
-    </>
+      ))} */}
+      {locales.map((loc, index) => {
+        return (
+          <div key={index}>
+            <Link href={asPath} locale={loc}>
+              <a className={loc === locale ? styles.active : ''}>{loc}</a>
+            </Link>
+          </div>
+        );
+      })}
+    </section>
   );
 };