refactor: separate strings

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<HTMLSelectElement>) => {
+    i18n.changeLanguage(event.target.value);
+    localStorage.setItem("language", event.target.value); // Salva escolha do usuário
+  };
   return (
     <HashRouter>
       <HeaderContainer>
@@ -11,9 +17,17 @@ export default function Header() {
           Giv's Website
         </HomeLink>
         <nav>
-          <NavLink href="#about">About Me</NavLink>
-          <NavLink href="#contact">Contact</NavLink>
-          <NavLink href="#projects">Projects</NavLink>
+          <NavLink href="#about">{t("about")}</NavLink>
+          <NavLink href="#contact">{t("contact")}</NavLink>
+          <NavLink href="#projects">{t("projects")}</NavLink>
+        <LanguageSelector onChange={changeLanguage}>
+          <option value="pt-br">
+            Português
+          </option>
+          <option value="en-us">
+            English
+          </option>
+        </LanguageSelector>
         </nav>
       </HeaderContainer>
     </HashRouter>

src/components/Header/styles.ts

@@ -44,3 +44,13 @@ export const HeaderContainer = styled.div`
     gap: 1rem;
   }
 `;
+
+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;
+`

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"
 }

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!"
 }

src/pages/about/index.tsx

@@ -7,9 +7,9 @@ export default function About() {
   const { t } = useTranslation();
   return (
     <MainContainer>
-      <h1>About Me</h1>
+      <h1>{t("about")}</h1>
       <Paragraph>
-      <span>{t("about")}</span>
+      <span>{t("aboutText")}</span>
       </Paragraph>
     </MainContainer>
   );

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 (
     <MainContainer>
-      <h1>Contact</h1>
+      <h1>{t("contact")}</h1>
       <Paragraph>
-        <span>If you want to contact me, you can use the links above, or say put in the field below to send me an email!</span>
+        <span>{t("contactInfo")}</span>
       </Paragraph>
       <form onSubmit={handleSubmit}>
         <TextArea
           onChange={(e) => setTypedText(e.target.value)}
           className="bgb"  
         />
-        <Button type='submit'><Send className="ico" />Send</Button>
+        <Button type='submit'><Send className="ico" />{t("send")}</Button>
       </form>
     </MainContainer>
   );

src/pages/home/index.tsx

@@ -5,13 +5,14 @@ import { faTelegram, faGithub } from '@fortawesome/free-brands-svg-icons';
 import { IconContainer, IconLink, HomeLabel, TopSection } from './styles';
 import { MainContainer } from '../../components/MainContent/styles';
 import { Avatar } from '../../components/Avatar/avatar';
+import { t } from 'i18next';
 
 export default function Home() {
   const typedElement = useRef(null);
 
   useEffect(() => {
     const typed = new Typed(typedElement.current, {
-      strings: ["Hi, I'm Giovani! Welcome to my website!"],
+      strings: [t("welcome")],
       typeSpeed: 70,
       backSpeed: 50,
       loop: false,
@@ -31,7 +32,7 @@ export default function Home() {
         </strong>
       </TopSection>
       <HomeLabel>
-        Hey, check out my social links!
+        {t("checkSocialLinks")}
       </HomeLabel>
       <IconContainer>
         <IconLink href="https://t.me/@givfnz2" target="_blank" rel="noopener noreferrer">

src/pages/projects/index.tsx

@@ -10,6 +10,7 @@ import {
   ProjectStars,
 } from './styles';
 import { MainContainer } from '../../components/MainContent/styles';
+import { t } from 'i18next';
 
 interface Repo {
   name: string;
@@ -34,7 +35,7 @@ export default function Projects() {
 
   return (
     <MainContainer>
-      <Title>Projects</Title>
+      <Title>{t("projects")}</Title>
       <ProjectGrid>
         {projects.map((project) => (
           <ProjectCard key={project.name} href={project.url} target="_blank" rel="noopener noreferrer">

src/pages/skills/index.tsx

@@ -2,11 +2,12 @@ import { MainContainer } from "../../components/MainContent/styles";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faAndroid, faAngular, faGit, faLinux, faNode, faReact, faWindows } from '@fortawesome/free-brands-svg-icons'
 import { SkillsContainer } from "./styles";
+import { t } from "i18next";
 
 export default function Skills() {
     return (
         <MainContainer>
-            <h1>Skills</h1>
+            <h1>{t("skills")}</h1>
             <SkillsContainer>
                 <FontAwesomeIcon size="2x" style={{ color: '#fff' }} icon={faAndroid} />
                 <p>Android</p>