From dec85dc0997db9db06e11f19faae1ec0ead72ef8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jimena=20Hern=C3=A1ndez?= Date: Mon, 13 Nov 2023 18:48:01 -0600 Subject: [PATCH] language addition home --- uniEmpleos/package.json | 2 ++ uniEmpleos/public/images/en.svg | 1 + uniEmpleos/public/images/es.svg | 1 + .../LanguageButton/LanguageButton.jsx | 36 +++++++++++++++++++ .../LanguageButton/LanguageButton.module.css | 21 +++++++++++ uniEmpleos/src/i18n.js | 21 +++++++++++ uniEmpleos/src/locales/en/translation.json | 36 +++++++++++++++++++ uniEmpleos/src/locales/es/translation.json | 36 +++++++++++++++++++ uniEmpleos/src/pages/Home/Home.jsx | 32 +++++++++-------- uniEmpleos/yarn.lock | 29 ++++++++++++++- 10 files changed, 200 insertions(+), 15 deletions(-) create mode 100644 uniEmpleos/public/images/en.svg create mode 100644 uniEmpleos/public/images/es.svg create mode 100644 uniEmpleos/src/components/LanguageButton/LanguageButton.jsx create mode 100644 uniEmpleos/src/components/LanguageButton/LanguageButton.module.css create mode 100644 uniEmpleos/src/i18n.js create mode 100644 uniEmpleos/src/locales/en/translation.json create mode 100644 uniEmpleos/src/locales/es/translation.json diff --git a/uniEmpleos/package.json b/uniEmpleos/package.json index 117b126d..83fa6808 100644 --- a/uniEmpleos/package.json +++ b/uniEmpleos/package.json @@ -21,6 +21,7 @@ "date-fns": "^2.30.0", "date-fns-tz": "^2.0.0", "eslint": "^7.32.0 || ^8.2.0", + "i18next": "^23.7.6", "joi": "^17.9.2", "prop-types": "^15.8.1", "react": "^18.2.0", @@ -28,6 +29,7 @@ "react-dnd-html5-backend": "^16.0.1", "react-dom": "^18.2.0", "react-dropzone": "^14.2.3", + "react-i18next": "^13.4.1", "react-icons": "^4.11.0", "react-quill": "^2.0.0", "react-quilljs": "^1.3.3", diff --git a/uniEmpleos/public/images/en.svg b/uniEmpleos/public/images/en.svg new file mode 100644 index 00000000..c5ca7f94 --- /dev/null +++ b/uniEmpleos/public/images/en.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/uniEmpleos/public/images/es.svg b/uniEmpleos/public/images/es.svg new file mode 100644 index 00000000..e8d72753 --- /dev/null +++ b/uniEmpleos/public/images/es.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/uniEmpleos/src/components/LanguageButton/LanguageButton.jsx b/uniEmpleos/src/components/LanguageButton/LanguageButton.jsx new file mode 100644 index 00000000..c0cf7899 --- /dev/null +++ b/uniEmpleos/src/components/LanguageButton/LanguageButton.jsx @@ -0,0 +1,36 @@ +import React, { useState } from "react" +import { useTranslation } from "react-i18next" +import i18n from "../../i18n" +import style from "./LanguageButton.module.css" + +const LanguageButton = () => { + const [language, setLanguage] = useState("es") + + const changeLanguage = () => { + if (language === "es") { + setLanguage("en") + i18n.changeLanguage("en") + } else { + setLanguage("es") + i18n.changeLanguage("es") + } + } + + return ( +
+ +
+ ) +} + +export default LanguageButton diff --git a/uniEmpleos/src/components/LanguageButton/LanguageButton.module.css b/uniEmpleos/src/components/LanguageButton/LanguageButton.module.css new file mode 100644 index 00000000..4e7199e0 --- /dev/null +++ b/uniEmpleos/src/components/LanguageButton/LanguageButton.module.css @@ -0,0 +1,21 @@ +.languageButton{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 0; + position: fixed; + bottom: 10px; + right: 10px; +} + +.mainButton{ + border-radius: 10px; + background-color: transparent; + margin: 0; +} + +.imgButton{ + height: 40px; + width: 40px; +} \ No newline at end of file diff --git a/uniEmpleos/src/i18n.js b/uniEmpleos/src/i18n.js new file mode 100644 index 00000000..b979106a --- /dev/null +++ b/uniEmpleos/src/i18n.js @@ -0,0 +1,21 @@ +import i18n from "i18next" +import { initReactI18next } from "react-i18next" +import enTranslations from "./locales/en/translation.json" +import esTranslations from "./locales/es/translation.json" + +i18n.use(initReactI18next).init({ + resources: { + en: { + translation: enTranslations, + }, + es: { + translation: esTranslations, + }, + }, + lng: "en", + interpolation: { + escapeValue: false, + }, +}) + +export default i18n diff --git a/uniEmpleos/src/locales/en/translation.json b/uniEmpleos/src/locales/en/translation.json new file mode 100644 index 00000000..2c0ccc1a --- /dev/null +++ b/uniEmpleos/src/locales/en/translation.json @@ -0,0 +1,36 @@ +{ + "home": { + "title1": "What is UniEmpleos?", + "desc1": "UniEmpleos is a platform that enables students from various universities in Guatemala to find job offers and professional internships.", + "title2": "How does it work?", + "desc2": "Companies publish their job offers and students can apply to them. The companies can view the profiles of the students and contact them." +}, + "intro": { + "description": "Guatemalan lawyer with experience in strategic analysis, political analysis and advisory to boards. Currently, I am the Executive President of the National Civic Movement. I participated in the 2022-2023 cohort of the Millennium Leadership Program at the Atlantic Council. On this website, I share reflections and resources to understand the sociopolitical environment in which we live." + }, + "podcast": { + "title": "Podcast", + "listen": "Listen", + "description": "We educate about the impact that politics, social relations, and economics have on society. We motivate to exercise individual sovereignty to achieve positive impacts on society. Being increasingly aware of the potential impact of our actions." + }, + "resources": { + "title": "Resources", + "categories": [ + "All", + "Press", + "News", + "Articles" + ] + }, + "analysis": { + "title": "Analysis" + }, + "contact": { + "title": "Get in Touch", + "subtitle": "Contact", + "collaborate": "I want to collaborate", + "motto": "The republic is still alive", + "address": "Address", + "media": "Social Media" + } +} diff --git a/uniEmpleos/src/locales/es/translation.json b/uniEmpleos/src/locales/es/translation.json new file mode 100644 index 00000000..c8a50ffa --- /dev/null +++ b/uniEmpleos/src/locales/es/translation.json @@ -0,0 +1,36 @@ +{ + "home": { + "title1": "¿Qué es UniEmpleos?", + "desc1": "UniEmpleos es una plataforma que permite a los estudiantes de distintas Universidades de Guatemala encontrar ofertas de trabajo y prácticas profesionales.", + "title2": "¿Cómo funciona?", + "desc2": "Las empresas publican sus ofertas de trabajo y los estudiantes pueden postular a ellas. Las empresas pueden ver los perfiles de los estudiantes y contactarlos." + }, + "intro": { + "description": "Abogado guatemalteco con experiencia en análisis estratégico, análisis político y asesorías a directivas. Actualmente soy Presidente Ejecutivo del Movimiento Cívico Nacional. Participé en el cohorte 2022-2023 del Millenium Leadership Program del Atlantic Council. En este website comparto reflexiones y recursos para comprender el entorno sociopolítico en el que vivimos." + }, + "podcast": { + "title": "Podcast", + "listen": "Escuchar", + "description": "Educamos sobre el impacto que la política, relaciones sociales y economía tiene en la sociedad. Motivamos a ejercer la soberanía individual para lograr impactos positivos en la sociedad. Ser cada vez más conscientes del potencial impacto de nuestras acciones." + }, + "resources": { + "title": "Recursos", + "categories": [ + "Todo", + "Prensa", + "Noticias", + "Artículos" + ] + }, + "analysis": { + "title": "Análisis" + }, + "contact": { + "title": "Ponte en Contacto", + "subtitle": "Contacto", + "collaborate": "Quiero colaborar", + "motto": "La república sigue viva", + "address": "Address", + "media": "Redes Sociales" + } +} diff --git a/uniEmpleos/src/pages/Home/Home.jsx b/uniEmpleos/src/pages/Home/Home.jsx index 2395736e..5f85f321 100644 --- a/uniEmpleos/src/pages/Home/Home.jsx +++ b/uniEmpleos/src/pages/Home/Home.jsx @@ -2,16 +2,13 @@ import React from "react" import { Player } from "@lottiefiles/react-lottie-player" import styles from "./Home.module.css" import Infocontainer from "../../components/Infocontainer/Infocontainer" -import Button from "../../components/Button/Button" -import { navigate } from "../../store" import HeaderHome from "../../components/HeaderHome/HeaderHome" import students from "./students.json" +import LanguageButton from "../../components/LanguageButton/LanguageButton" +import { useTranslation } from "react-i18next" const Home = () => { - const handleNav = (path) => { - navigate(path) - } - + const { t } = useTranslation() return (
@@ -23,7 +20,10 @@ const Home = () => {

Uni

-
@@ -31,7 +31,10 @@ const Home = () => {

UniEmpleos

-
@@ -41,21 +44,22 @@ const Home = () => {
+
+ +
) } diff --git a/uniEmpleos/yarn.lock b/uniEmpleos/yarn.lock index 14927841..282de502 100644 --- a/uniEmpleos/yarn.lock +++ b/uniEmpleos/yarn.lock @@ -1347,7 +1347,7 @@ dependencies: regenerator-runtime "^0.14.0" -"@babel/runtime@^7.14.8", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6": +"@babel/runtime@^7.14.8", "@babel/runtime@^7.22.5", "@babel/runtime@^7.23.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6": version "7.23.2" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885" integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg== @@ -9190,6 +9190,13 @@ html-minifier-terser@^5.0.1: relateurl "^0.2.7" terser "^4.6.3" +html-parse-stringify@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2" + integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg== + dependencies: + void-elements "3.1.0" + html-tags@^3.1.0: version "3.3.1" resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce" @@ -9285,6 +9292,13 @@ human-signals@^2.1.0: resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0" integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw== +i18next@^23.7.6: + version "23.7.6" + resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.7.6.tgz#7328e76c899052d5d33d930164612dd21e575f74" + integrity sha512-O66BhXBw0fH4bEJMA0/klQKPEbcwAp5wjXEL803pdAynNbg2f4qhLIYlNHJyE7icrL6XmSZKPYaaXwy11kJ6YQ== + dependencies: + "@babel/runtime" "^7.23.2" + iconv-lite@0.4.24: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" @@ -12634,6 +12648,14 @@ react-helmet-async@^1.0.7: react-fast-compare "^3.2.0" shallowequal "^1.1.0" +react-i18next@^13.4.1: + version "13.4.1" + resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-13.4.1.tgz#cc1fc0422b4652524c8f2f7856fa9b3db4c4dfae" + integrity sha512-z02JvLbt6Gavbuhr4CBOI6vasLypo+JSLvMgUOGeOMPv1g6spngfAb9jWAPwvuavPlKYU4dro9yRduflwyBeyA== + dependencies: + "@babel/runtime" "^7.22.5" + html-parse-stringify "^3.0.1" + react-icons@^4.11.0: version "4.11.0" resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.11.0.tgz#4b0e31c9bfc919608095cc429c4f1846f4d66c65" @@ -14965,6 +14987,11 @@ vm-browserify@^1.0.1: resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0" integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ== +void-elements@3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09" + integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w== + w3c-xmlserializer@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073"