[FEATURE] Add i18n support

[guibranco]

Description
To enhance the accessibility of our application, we need to implement internationalization (I18N) support. The application should support at least three languages: Portuguese (PT-BR), English (EN-US), and Spanish (ES-ES). This will allow users to interact with the application in their preferred language.

Acceptance Criteria

• The application should be able to switch between the three specified languages.
• Translations should be stored in separate files for better maintainability.
• Ensure that all user-facing strings are translated.

Proposed Solution
We can use the react-i18next library for implementing I18N support. Below is a code example to demonstrate how to set up I18N support in the application.

Installation
First, install the required packages:

npm install i18next react-i18next

Setup Example
Create a i18n.js file for configuring I18N:

// src/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: {
          welcome: "Welcome to our application!",
        },
      },
      pt: {
        translation: {
          welcome: "Bem-vindo ao nosso aplicativo!",
        },
      },
      es: {
        translation: {
          welcome: "¡Bienvenido a nuestra aplicación!",
        },
      },
    },
    lng: "en", // default language
    fallbackLng: "en", // fallback language
    interpolation: {
      escapeValue: false, // React already escapes values
    },
  });

export default i18n;

Usage Example
Now, in your components, you can use the useTranslation hook to access the translations:

// src/App.js
import React from 'react';
import { useTranslation } from 'react-i18next';
import './i18n'; // import the i18n configuration

function App() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      {/* Add language switcher here */}
    </div>
  );
}

export default App;

Language Switcher Example
You can implement a simple language switcher:

function LanguageSwitcher() {
  const { i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('pt')}>Português</button>
      <button onClick={() => changeLanguage('es')}>Español</button>
    </div>
  );
}

Additional Context
For more detailed guidance, refer to the Medium article on adding I18N to a React application.