feat: manage i18n

fisirc · Nov 29, 2024 · 62a9839 · 62a9839
1 parent c9fc840
commit 62a9839
Show file tree

Hide file tree

Showing 10 changed files with 445 additions and 44 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -29,12 +29,15 @@
     "axios": "^1.7.8",
     "debounce": "^2.2.0",
     "ecctrl": "^1.0.92",
+    "i18next": "^24.0.2",
+    "i18next-browser-languagedetector": "^8.0.0",
     "konva": "^9.3.16",
     "lucide-react": "^0.461.0",
     "r3f-perf": "^7.2.3",
     "react": "^18.3.1",
     "react-confetti": "^6.1.0",
     "react-dom": "^18.3.1",
+    "react-i18next": "^15.1.3",
     "react-konva": "^18.2.10",
     "react-responsive-masonry": "^2.4.1",
     "react-use": "^17.5.1",

diff --git a/app/src/components/Footer/Footer.tsx b/app/src/components/Footer/Footer.tsx
@@ -1,44 +1,46 @@
 import React from 'react';
 import styles from './Footer.module.css';
+import { useTranslation, Trans } from 'react-i18next';
 
 export const Footer: React.FC = () => {
+  const { t } = useTranslation();
   return (
     <footer className={styles.footer}>
       <div className={styles.container}>
         <div className={styles.column}>
           <h3 className={styles.title}>Metagallery</h3>
           <p className={styles.description}>
-            Convierte tus creaciones en una <br></br>
-            experiencia visual única con<br></br>
-            Metagallery.
+            {t('footer_description_line1')}<br></br>
+            {t('footer_description_line2')}<br></br>
+            {t('footer_description_line3')}
           </p>
         </div>
         <div className={styles.column}>
-          <h4 className={styles.subtitle}>Enlaces</h4>
+          <h4 className={styles.subtitle}>{t('footer_links')}</h4>
           <ul className={styles.list}>
-            <li><a href="#" className={styles.link}>Inicio</a></li>
-            <li><a href="#" className={styles.link}>Precios</a></li>
-            <li><a href="#" className={styles.link}>Contacto</a></li>
+            <li><a href="#" className={styles.link}>{t('footer_link1')}</a></li>
+            <li><a href="#" className={styles.link}>{t('footer_link2')}</a></li>
+            <li><a href="#" className={styles.link}>{t('footer_link3')}</a></li>
           </ul>
         </div>
         <div className={styles.column}>
-          <h4 className={styles.subtitle}>Legal</h4>
+          <h4 className={styles.subtitle}>{t('footer_legal')}</h4>
           <ul className={styles.list}>
-            <li><a href="#" className={styles.link}>Términos de servicio</a></li>
-            <li><a href="#" className={styles.link}>Política de privacidad</a></li>
+            <li><a href="#" className={styles.link}>{t('footer_legal1')}</a></li>
+            <li><a href="#" className={styles.link}>{t('footer_legal2')}</a></li>
           </ul>
         </div>
         <div className={styles.column}>
-          <h4 className={styles.subtitle}>Síguenos</h4>
+          <h4 className={styles.subtitle}>{t('footer_socialmedia')}</h4>
           <ul className={styles.list}>
-            <li><a href="#" className={styles.link}>Twitter</a></li>
-            <li><a href="#" className={styles.link}>Facebook</a></li>
-            <li><a href="#" className={styles.link}>Instagram</a></li>
+            <li><a href="#" className={styles.link}>{t('footer_socialmedia1')}</a></li>
+            <li><a href="#" className={styles.link}>{t('footer_socialmedia2')}</a></li>
+            <li><a href="#" className={styles.link}>{t('footer_socialmedia3')}</a></li>
           </ul>
         </div>
       </div>
       <div className={styles.bottom}>
-        <p className={styles.copyright}>&copy; 2024 Metagallery. Todos los derechos reservados.</p>
+        <p className={styles.copyright}>&copy; {t('footer_finalmessage')}</p>
       </div>
     </footer>
   );