projects page with both languages

Author: MAlexGG

src/components/contact/Contact.jsx

@@ -8,6 +8,8 @@ import cv from '/img/icons/cv.svg'
 import github from '/img/icons/github.svg'
 import { useNavigate } from 'react-router'
 import LangToggle from '../langToggle/LangToggle'
+import { useLanguage } from '../../context/LanguageContext'
+import { translations } from '../../translations'
 
 function Contact() {
 
@@ -16,6 +18,9 @@ function Contact() {
         navigate("/");
     }
 
+    const { language } = useLanguage();
+    const t = translations[language].nav;
+
   return (
     <header className={styles.ctHeader}>
         <nav className={styles.ctLinks}>
@@ -27,7 +32,7 @@ function Contact() {
         <div className={styles.ctStates}>
             <button className={styles.btRefresh} onClick={handleRefresh}>
                 <img className="img-refresh" src={refresh} alt="refresh button" />
-                <p className={styles.btLabel}>refresh</p>
+                <p className={styles.btLabel}>{t.refresh}</p>
             </button>
             <LangToggle/>
         </div>

src/components/langToggle/LangToggle.jsx

@@ -1,10 +1,11 @@
 import { useLanguage } from "../../context/LanguageContext";
 import styles from './LangToggle.module.css'
-
+import { translations } from '../../translations'
 
 const LangToggle = () => {
 
     const { language, toggleLanguage } = useLanguage();
+    const t = translations[language].lang;
 
     return (
         <div className={styles.ctLangToggle}>
@@ -13,7 +14,7 @@ const LangToggle = () => {
                     <p className={styles.txtToggle}>{language === "en" ? "ES": "EN"}</p>
                 </div>
             </div>
-            <p className={styles.btLabel}>language</p>
+            <p className={styles.btLabel}>{t.language}</p>
         </div>
     )
 

src/pages/projects/Projects.jsx

@@ -2,15 +2,21 @@ import Navbar from '../../components/navbar/Navbar'
 import Divisor from '../../components/divisor/Divisor'
 import styles from './Projects.module.css' 
 import { Link } from 'react-router'
+import { useLanguage } from '../../context/LanguageContext';
+import { translations } from '../../translations'
 
 function Projects() {
+
+  const { language } = useLanguage();
+  const t = translations[language].projects;
+
   return (
     <div className={styles.ctProjects}>
       <Divisor position="up"/>
       <Navbar/>
       <main className={styles.ctProjectType}>
-          <Link to={"/pedagogical"} state={true} className={styles.btProjects}>Pedagogical Projects</Link>
-          <Link to={"/professional-personal"} state={true} className={styles.btProjects}>Professional & Personal Projects</Link>
+          <Link to={"/pedagogical"} state={true} className={styles.btProjects}>{t.pedagogical}</Link>
+          <Link to={"/professional-personal"} state={true} className={styles.btProjects}>{t.professional}</Link>
       </main>
       <Divisor position="down"/>
     </div>

src/translations/en.json

@@ -2,12 +2,15 @@
     "home": {
         "title": ""
     },
+    "lang": {
+        "language": "language" 
+    },
     "nav": {
         "home": "home",
         "projects": "projects",
         "tools": "tools",
-        "green": "green"
-
+        "green": "green",
+        "refresh": "refresh"
     },
     "aboutme": {
         "title": "ABOUT ME",
@@ -36,8 +39,8 @@
         "alt_carbon_calculator": "The website carbon calculator rate this page as cleaner than 97% of web pages tested. "
     },
     "projects": {
-        "pedagogical": "",
-        "professional": ""
+        "pedagogical": "Pedagogical Projects",
+        "professional": "Professional & Personal Projects"
     },
     "notfound": {
         "title": "Page not found"

src/translations/es.json

@@ -2,12 +2,15 @@
     "home": {
         "title": ""
     },
+    "lang": {
+        "language": "idioma" 
+    },
     "nav": {
         "home": "inicio",
         "projects": "proyectos",
         "tools": "tic",
-        "green": "verde"
-
+        "green": "verde",
+        "refresh": "refrescar"
     },
     "aboutme": {
         "title": "ACERCA DE MÍ",
@@ -36,8 +39,8 @@
         "alt_carbon_calculator": "Website carbon calculator califica esta página como más limpia que el 97% de las páginas web probadas."
     },
     "projects": {
-        "pedagogical": "",
-        "professional": ""
+        "pedagogical": "Proyectos educativos",
+        "professional": "Proyectos personales y profesionales"
     },
     "notfound": {
         "title": "Página no encontrada"