diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index d4449c2..e466184 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,8 +1,14 @@ import { HashRouter } from "react-router-dom"; -import { HeaderContainer, NavLink, HomeLink } from "./styles"; +import { HeaderContainer, NavLink, HomeLink, LanguageSelector } from "./styles"; import { AvatarHeader } from "../Avatar/avatar"; +import i18n from "../../utils/i18n"; +import { t } from "i18next"; export default function Header() { + const changeLanguage = (event: React.ChangeEvent) => { + i18n.changeLanguage(event.target.value); + localStorage.setItem("language", event.target.value); // Salva escolha do usuário + }; return ( @@ -11,9 +17,17 @@ export default function Header() { Giv's Website diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts index 75c3a0f..b721121 100644 --- a/src/components/Header/styles.ts +++ b/src/components/Header/styles.ts @@ -43,4 +43,14 @@ export const HeaderContainer = styled.div` display: flex; gap: 1rem; } -`; \ No newline at end of file +`; + +export const LanguageSelector = styled.select` + background-color: ${props => props.theme["gray-800"]}; + color: ${props => props.theme.white}; + border-radius: 8px; + padding: 5px; + border: 0; + align-items: center; + justify-content: center; +` \ No newline at end of file diff --git a/src/locales/en-us.json b/src/locales/en-us.json index c970cad..36d6973 100644 --- a/src/locales/en-us.json +++ b/src/locales/en-us.json @@ -1,3 +1,11 @@ { - "about": "I'm Giovani, a software engineering student, interning and studying in Minas Gerais, Brazil!" + "about": "About me", + "aboutText": "I'm Giovani, a software engineering student, interning and studying in Minas Gerais, Brazil!", + "contact": "Contact", + "contactInfo": "If you want to contact me, you can use the links above, or say put in the field below to send me an email!", + "checkSocialLinks": "Hey, check out my social links!", + "welcome": "Hi, I'm Giovani! Welcome to my website!", + "skills": "Skills", + "projects": "Projects", + "send": "Send" } \ No newline at end of file diff --git a/src/locales/pt-br.json b/src/locales/pt-br.json index 62a6fa1..8ccf280 100644 --- a/src/locales/pt-br.json +++ b/src/locales/pt-br.json @@ -1,3 +1,4 @@ { - "about": "Meu nome é Giovani, estudante de engenharia de software, estagiando e estudando em Minas Gerais, Brasil!" + "about": "Sobre mim", + "aboutText": "Meu nome é Giovani, estudante de engenharia de software, estagiando e estudando em Minas Gerais, Brasil!" } \ No newline at end of file diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx index 965ae06..2ca26c0 100644 --- a/src/pages/about/index.tsx +++ b/src/pages/about/index.tsx @@ -7,9 +7,9 @@ export default function About() { const { t } = useTranslation(); return ( -

About Me

+

{t("about")}

- {t("about")} + {t("aboutText")}
); diff --git a/src/pages/contact/index.tsx b/src/pages/contact/index.tsx index 888c164..3b16825 100644 --- a/src/pages/contact/index.tsx +++ b/src/pages/contact/index.tsx @@ -3,6 +3,7 @@ import { Button, TextArea } from './styles'; import { MainContainer } from '../../components/MainContent/styles'; import { Send } from 'lucide-react'; import { Paragraph } from '../../components/Paragraph/styles'; +import { t } from 'i18next'; export default function Contact() { const emailAddress = import.meta.env.VITE_GIV_EMAIL; @@ -15,16 +16,16 @@ export default function Contact() { return ( -

Contact

+

{t("contact")}

- If you want to contact me, you can use the links above, or say put in the field below to send me an email! + {t("contactInfo")}