Merge pull request #13 from Hugomndez:feature/internationalized

Feature/internationalized

next-i18next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  i18n: {
+    locales: ['en-US', 'es-MX'],
+    defaultLocale: 'en-US',
+  },
+};

next.config.js

@@ -1,9 +1,11 @@
 /** @type {import('next').NextConfig} */
 const generateRobotsTxt = require('./src/utils/generate-robots-txt');
+const { i18n } = require('./next-i18next.config');
 
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
+  i18n,
   experimental: {
     images: {
       allowFutureImage: true,

package.json

@@ -27,13 +27,16 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "cookie": "0.5.0",
     "critters": "0.0.16",
     "next": "12.2.4",
     "next-auth": "4.10.3",
+    "next-i18next": "11.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
+    "@types/cookie": "0.5.1",
     "@types/node": "18.7.1",
     "@types/react": "18.0.17",
     "@types/react-dom": "18.0.6",

public/locales/en-US/common.json

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

public/locales/en-US/exchange.json

@@ -0,0 +1,7 @@
+{
+  "title": "We make all exchange rates visible.",
+  "subTitle": "We bring real-time information from the world's most important exchange houses and currencies.",
+  "coins": "Coins",
+  "commissions": "Commissions",
+  "updated": "Updated"
+}

public/locales/en-US/header.json

@@ -0,0 +1,5 @@
+{
+  "title": "The next revolution in cryptocurrency exchange.",
+  "subTitle": "Batatabit helps you navigate between the different prices and trends.",
+  "callToAction": "See Our Plans"
+}

public/locales/en-US/plans.json

@@ -0,0 +1,25 @@
+{
+  "title": "Choose the plan that best suits you.",
+  "subTitle": "Any plan gives you full access to our platform.",
+  "recommended": "Recommended",
+  "plans": [
+    {
+      "payment": "Monthly payment",
+      "price": 19,
+      "description": "Limited access",
+      "callToAction": "Choose this"
+    },
+    {
+      "payment": "Annual payment",
+      "price": 99,
+      "description": "You save $129 compared to the monthly plan.",
+      "callToAction": "Choose this"
+    },
+    {
+      "payment": "Annual payment",
+      "price": 199,
+      "description": "Unlimited access",
+      "callToAction": "Choose this"
+    }
+  ]
+}

public/locales/en-US/poster.json

@@ -0,0 +1,3 @@
+{
+  "title": "Subscribe Today"
+}

public/locales/en-US/productDetails.json

@@ -0,0 +1,22 @@
+{
+  "title": "We create a product like no other.",
+  "subTitle": "Reliable and designed for your daily use.",
+  "details": [
+    {
+      "name": "Real time",
+      "description": "Our API takes minute-by-minute information on the rates that most determine behavior."
+    },
+    {
+      "name": "There are no hidden fees",
+      "description": "Neither in the purchase nor at the time of exit, Batabit always shows you the real cost of what you are purchasing."
+    },
+    {
+      "name": "Compare currencies",
+      "description": "Neither in the purchase nor at the time of exit, Batabit always shows you the real cost of what you are purchasing."
+    },
+    {
+      "name": "Reliable information",
+      "description": "Our sources are 100% verified and we continue to audit their content as they update."
+    }
+  ]
+}

public/locales/es-MX/common.json

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

public/locales/es-MX/exchange.json

@@ -0,0 +1,7 @@
+{
+  "title": "Visibilizamos todas las tasas de cambio.",
+  "subTitle": "Traemos información en tiempo real de las casas de cambio y las monedas más importantes del mundo.",
+  "coins": "Monedas",
+  "commissions": "Comisiones",
+  "updated": "Actualizado"
+}

public/locales/es-MX/header.json

@@ -0,0 +1,5 @@
+{
+  "title": "La próxima revolución en el intercambio de criptomonedas.",
+  "subTitle": "Batatabit te ayuda a navegar entre los diferentes precios y tendencias.",
+  "callToAction": "Conoce Nuestros Planes"
+}

public/locales/es-MX/plans.json

@@ -0,0 +1,25 @@
+{
+  "title": "Escoge el plan que mejor se ajuste a ti.",
+  "subTitle": "Cualquier plan te da acceso completo a nuestra plataforma.",
+  "recommended": "Recomendado",
+  "plans": [
+    {
+      "payment": "Pago mensual",
+      "price": 19,
+      "description": "Acceso limitado",
+      "callToAction": "Escoger este"
+    },
+    {
+      "payment": "Pago anual",
+      "price": 99,
+      "description": "Ahorras $129 comparado al plan mensual.",
+      "callToAction": "Escoger este"
+    },
+    {
+      "payment": "Pago anual",
+      "price": 199,
+      "description": "Acceso ilimitado",
+      "callToAction": "Escoger este"
+    }
+  ]
+}

public/locales/es-MX/poster.json

@@ -0,0 +1,3 @@
+{
+  "title": "Conócelo Hoy"
+}

public/locales/es-MX/productDetails.json

@@ -0,0 +1,22 @@
+{
+  "title": "Creamos un producto sin comparación.",
+  "subTitle": "Confiable y diseñado para su uso diario.",
+  "details": [
+    {
+      "name": "Tiempo real",
+      "description": "Nuestra API toma información minuto a minuto sobre las tasas que más determinan el comportamiento."
+    },
+    {
+      "name": "No hay tasas escondidas",
+      "description": "Ni en la compra o al momento de exit, Batabit siempre te muestra el costo real de lo que estás adquiriendo."
+    },
+    {
+      "name": "Compara monedas",
+      "description": "Ni en la compra o al momento de exit, Batabit siempre te muestra el costo real de lo que estás adquiriendo."
+    },
+    {
+      "name": "Información confiable",
+      "description": "Nuestras fuentes están 100% verificadas y continuamos auditando su contenido mientras actualizan."
+    }
+  ]
+}

src/components/Exchange/Exchange.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'next-i18next';
 import Image from 'next/future/image';
 import trendingDown from '../../assets/icons/trending-down.svg';
 import trendingUp from '../../assets/icons/trending-up.svg';
@@ -6,23 +7,19 @@ import { useDate } from '../../hooks';
 import styles from './Exchange.module.css';
 
 const Exchange = () => {
+  const { t } = useTranslation('exchange');
   const date = useDate();
 
   return (
     <section className={styles.section}>
       <Image src={bitcoin} alt='' className={styles.image} priority />
       <div className={styles.titleContainer}>
-        <h2 className={styles.title}>
-          Visibilizamos todas las tasas de cambio.
-        </h2>
-        <p className={styles.subtitle}>
-          Traemos información en tiempo real de las casas de cambio y las
-          monedas más importantes del mundo.
-        </p>
+        <h2 className={styles.title}>{t('title')}</h2>
+        <p className={styles.subtitle}>{t('subTitle')}</p>
       </div>
       <section className={styles.tables}>
         <div className={styles.currencyTable}>
-          <p className={styles.currencyTableTitle}>Monedas</p>
+          <p className={styles.currencyTableTitle}>{t('coins')}</p>
           <div className={styles.currencyTableContainer}>
             <table className={styles.table}>
               <tbody>
@@ -93,12 +90,12 @@ const Exchange = () => {
           </div>
           <div className={`${styles.date} ${styles.currencyDateBg}`}>
             <p>
-              <b>Actualizado:</b> <span>{date}</span>
+              <b>{t('updated')}:</b> <span>{date}</span>
             </p>
           </div>
         </div>
         <div className={styles.comisionesTable}>
-          <p className={styles.comisionesTableTitle}>Comisiones</p>
+          <p className={styles.comisionesTableTitle}>{t('commissions')}</p>
           <div className={styles.comisionesTableContainer}>
             <table className={styles.table}>
               <tbody>
@@ -137,7 +134,7 @@ const Exchange = () => {
           </div>
           <div className={`${styles.date} ${styles.comisionesDateBg}`}>
             <p>
-              <b>Actualizado:</b> <span>{date}</span>
+              <b>{t('updated')}:</b> <span>{date}</span>
             </p>
           </div>
         </div>

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

@@ -0,0 +1,36 @@
+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, asPath } = useRouter();
+  const { t } = useTranslation('common');
+
+  // Locales aren't configured
+  if (locale == undefined || locales == undefined) return null;
+
+  return (
+    <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>
+  );
+};
+
+export default LocaleOptions;

src/components/LocaleOptions/index.ts

@@ -0,0 +1 @@
+export { default as LocaleOptions } from './LocaleOptions';

src/components/LoginLogout/LoginLogout.tsx

@@ -1,16 +1,18 @@
 import { signIn, signOut, useSession } from 'next-auth/react';
+import { useTranslation } from 'next-i18next';
 import styles from './LoginLogout.module.css';
 
 const LoginLogout = () => {
   const { data: session, status } = useSession(); // Obteniendo status
   const loading = status === 'loading';
+  const { t } = useTranslation('common');
 
   if (loading) return null; // if loading don't show anything
 
   if (!session) {
     return (
       <button className={styles.button} onClick={() => signIn()}>
-        Sign In
+        {t('signIn')}
       </button>
     );
   }
@@ -19,7 +21,7 @@ const LoginLogout = () => {
     <>
       <span className={styles.username}>{session.user?.name}</span>
       <button className={styles.button} onClick={() => signOut()}>
-        Log Out
+        {t('signOut')}
       </button>
     </>
   );