Add translations with i18n

package.json

@@ -23,11 +23,14 @@
     "clsx": "^2.1.0",
     "express": "^4.19.2",
     "html-to-image": "^1.11.11",
+    "i18next": "^23.11.1",
+    "i18next-browser-languagedetector": "^7.2.1",
     "lodash.throttle": "^4.1.1",
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.2",
+    "react-i18next": "^14.1.0",
     "react-popper": "^2.3.0",
     "react-router-dom": "^6.22.3",
     "tailwind-merge": "^2.2.2",

src/App.tsx

@@ -8,6 +8,8 @@ import { apiClient } from '@utils';
 import { Route, Routes } from 'react-router-dom';
 import { useUserStore } from './store/useUserStore';
 
+import '@config/i18n';
+
 function App() {
   const setUser = useUserStore((state) => state.setUser);
 

src/common/types/Language.ts

@@ -0,0 +1,4 @@
+export enum Language {
+  ES = 'es',
+  EN = 'en'
+}

src/components/Buttons/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -1,6 +1,7 @@
 import { Dispatch } from 'react';
 import { ButtonSize, cn, Variant } from '@common';
 import { Button } from '@components';
+import { useTranslation } from 'react-i18next';
 
 interface ToggleButtonGroupProps {
   /**
@@ -25,6 +26,7 @@ interface ToggleButtonGroupProps {
 }
 
 export const ToggleButtonGroup = ({ className, isActive, setIsActive, setFilter }: ToggleButtonGroupProps) => {
+  const { t } = useTranslation();
   const classes = {
     container: cn('max-sm:grid max-sm:gap-4 ', className)
   };
@@ -44,15 +46,15 @@ export const ToggleButtonGroup = ({ className, isActive, setIsActive, setFilter
         variant={handleButtonVariant(isActive)}
         className="sm:rounded-r-none max-sm:w-full"
       >
-        Activos
+        {t('common_active')}
       </Button>
       <Button
         size={ButtonSize.xl}
         onClick={() => handleActive(false)}
         className="sm:rounded-l-none max-sm:w-full"
         variant={handleButtonVariant(!isActive)}
       >
-        Cerrados
+        {t('common_closed')}
       </Button>
     </div>
   );

src/components/Cards/ProjectCard/ProjectCard.tsx

@@ -1,6 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { cn, groupParticipantsByRole, Project } from '@common';
 import { Button, CardWrapper, Popover, Tag } from '@components';
+import { useTranslation } from 'react-i18next';
 
 interface ProjectCardProps extends Omit<Project, 'id' | 'createdAt' | 'repositoryUrl'>, HTMLAttributes<HTMLDivElement> {
   /**
@@ -43,6 +44,7 @@ export const ProjectCard = ({
       'bg-gradient-to-rb from-primary-600 to-secondary-500 w-5 h-5 rounded-full text-xs flex items-center justify-center cursor-pointer select-none'
     )
   };
+  const { t } = useTranslation();
 
   const handleDescription = () => {
     if (description.length > 175) return `${description.slice(0, 130)}...`;
@@ -104,7 +106,7 @@ export const ProjectCard = ({
       {/* Participants Section */}
       <section aria-labelledby="participants-title">
         <h4 id="participants-title" className={classes.subTitle}>
-          Participantes
+          {t('common_participants')}
         </h4>
         <ul className={classes.list}>{renderParticipantsTag}</ul>
       </section>
@@ -114,7 +116,7 @@ export const ProjectCard = ({
         <>
           <section aria-labelledby="roles-title">
             <h4 id="roles-title" className={classes.subTitle}>
-              Estamos buscando
+              {t('project_card_look_for_role_section_title')}
             </h4>
             <ul className={classes.list}>{renderRequiredRolesTag()}</ul>
           </section>

src/components/Countdown/Countdown.tsx

@@ -1,22 +1,24 @@
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 export const Countdown = () => {
+  const { t } = useTranslation();
   const time = [
     {
       key: 'days',
-      label: 'Días'
+      label: t('common_days')
     },
     {
       key: 'hours',
-      label: 'Horas'
+      label: t('common_hours')
     },
     {
       key: 'minutes',
-      label: 'Minutos'
+      label: t('common_minutes')
     },
     {
       key: 'seconds',
-      label: 'Segundos'
+      label: t('common_seconds')
     }
   ];
 

src/components/Footer/Footer.tsx

@@ -1,4 +1,5 @@
 import { cn, ROUTE } from '@common';
+import { Trans, useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
 interface SocialIcon {
@@ -21,6 +22,8 @@ const socialIcons: SocialIcon[] = [
 ];
 
 export const Footer = () => {
+  const { t } = useTranslation();
+  const currentYear = new Date().getFullYear();
   const classes = {
     container: cn('text-cWhite bg-gradient-to-r from-[#19101D] to-[#0D0D0E] py-5 w-full font-dmsans'),
     innerContainer: cn('max-w-7xl w-full mx-auto text-center mb-10 flex flex-col justify-between items-center'),
@@ -53,7 +56,7 @@ export const Footer = () => {
 
           <div className="ml-3 flex flex-col gap-y-3">
             <h4 id="event-info-heading" className="text-sm">
-              Más información del evento
+              {t('footer_social_networks_title')}
             </h4>
             <nav aria-label="Social media links" className="flex gap-x-5 text-2xl">
               {renderSocialIcons()}
@@ -63,14 +66,11 @@ export const Footer = () => {
 
         {/* Copyrights */}
         <div className={classes.copyRight}>
-          © 2024 Designed&nbsp;
-          <a href="https://www.twitch.tv/uxanarangel" className="custom-underline">
-            Ana Rangel
-          </a>
-          &nbsp;Developed by&nbsp;
-          <a href="https://discord.com/invite/comuafor" className="custom-underline">
-            Comuafor
-          </a>
+          <Trans i18nKey={'footer_title'}>
+            {{ currentYear }}
+            <a href="https://www.twitch.tv/uxanarangel" className="custom-underline"></a>
+            <a href="https://discord.com/invite/comuafor" className="custom-underline"></a>
+          </Trans>
         </div>
       </div>
     </footer>

src/components/Navigation/LoggedUser.tsx

@@ -1,6 +1,7 @@
 import { FC, useRef, useState } from 'react';
 import { AvatarSize, cn, useAuth, useBreakpoint, useOnClickOutside } from '@common';
 import { User } from '@supabase/supabase-js';
+import { useTranslation } from 'react-i18next';
 import { Avatar } from '../Avatar/Avatar';
 
 interface Props {
@@ -21,6 +22,7 @@ export const LoggedUser: FC<Props> = ({ className, user, avatarSize = AvatarSize
   const { signOut } = useAuth();
   const { isMobile } = useBreakpoint();
   const [isOpen, setIsOpen] = useState(false);
+  const { t } = useTranslation();
 
   const modalRef = useRef<HTMLDivElement | null>(null);
 
@@ -54,7 +56,7 @@ export const LoggedUser: FC<Props> = ({ className, user, avatarSize = AvatarSize
         <div className={classes.modal}>
           <p className={classes.text} onMouseDown={(e) => e.stopPropagation()} onClick={signOut}>
             <span className="i-material-symbols-exit-to-app-rounded" />
-            Cerrar sesión
+            {t('common_log_out')}
           </p>
         </div>
       )}

src/components/Navigation/Nav.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { AvatarSize, ButtonSize, cn, ROUTE, useAuth, useBreakpoint, useNavAnimation, Variant } from '@common';
 import { BurgerButton, Button, Logo } from '@components';
 import { useUserStore } from '@store';
+import { useTranslation } from 'react-i18next';
 import { Link, NavLink } from 'react-router-dom';
 import { LoggedUser } from './LoggedUser';
 
@@ -12,6 +13,7 @@ interface NavProps {
   className?: string;
 }
 export const Nav = ({ className }: NavProps) => {
+  const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const { isMobile } = useBreakpoint();
   const { signInWithDiscord } = useAuth();
@@ -86,7 +88,7 @@ export const Nav = ({ className }: NavProps) => {
         <ul className={classes.list}>
           <li>
             <NavLink className={({ isActive }) => classes.listItem(isActive)} to={ROUTE.home}>
-              Inicio
+              {t('common_home')}
             </NavLink>
           </li>
           <li>
@@ -95,7 +97,7 @@ export const Nav = ({ className }: NavProps) => {
 
           <li>
             <NavLink to={ROUTE.projects} className={({ isActive }) => classes.listItem(isActive)}>
-              Proyectos
+              {t('common_projects')}
             </NavLink>
           </li>
           <li>
@@ -104,7 +106,7 @@ export const Nav = ({ className }: NavProps) => {
 
           <li>
             <NavLink to={ROUTE.registration} className={({ isActive }) => classes.listItem(isActive)}>
-              Registro
+              {t('common_register')}
             </NavLink>
           </li>
 
@@ -124,7 +126,7 @@ export const Nav = ({ className }: NavProps) => {
                 hasBorder
                 size={handleButtonSize}
               >
-                Accede con Discord
+                {t('nav_log_in_button')}
               </Button>
             )}
           </li>

src/config/i18n.ts

@@ -0,0 +1,26 @@
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+import { Language } from '../common/types/Language';
+import translation_en from '../locales/en.json';
+import translation_es from '../locales/es.json';
+
+const DETECTION_OPTIONS = {
+  order: ['navigator']
+};
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    detection: DETECTION_OPTIONS,
+    resources: {
+      es: {
+        translation: translation_es
+      },
+      en: {
+        translation: translation_en
+      }
+    },
+    fallbackLng: Language.EN
+  });