diff --git a/src/App.tsx b/src/App.tsx index 03fbfbd..7668d8a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -37,7 +37,7 @@ function App() { ); diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 47d22e6..13bcd06 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -2,11 +2,12 @@ import { HashRouter } from "react-router-dom"; import { HeaderContainer, NavLink, HomeLink, LanguageSelector } from "./styles"; import { AvatarHeader } from "../Avatar/avatar"; import i18n from "../../utils/i18n"; -import { t } from "i18next"; import { Drawer, DrawerContainer, DrawerItem } from "../Drawer/styles"; import useDrawerVisible from "../../hooks/useDrawerVisible"; +import { useTranslation } from "react-i18next"; export default function Header() { + const { t } = useTranslation(); const changeLanguage = (event: React.ChangeEvent) => { i18n.changeLanguage(event.target.value); localStorage.setItem("language", event.target.value); diff --git a/src/pages/contact/index.tsx b/src/pages/contact/index.tsx index 3b16825..8532107 100644 --- a/src/pages/contact/index.tsx +++ b/src/pages/contact/index.tsx @@ -3,9 +3,10 @@ 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'; +import { useTranslation } from 'react-i18next'; export default function Contact() { + const { t } = useTranslation(); const emailAddress = import.meta.env.VITE_GIV_EMAIL; const [typedText, setTypedText] = useState(''); diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 5c15056..7e95f23 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -5,10 +5,12 @@ 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'; import { Paragraph } from '../../components/Paragraph/styles'; +import { useTranslation } from 'react-i18next'; +import i18n from '../../utils/i18n'; export default function Home() { + const { t } = useTranslation(); const typedElement = useRef(null); useEffect(() => { @@ -22,7 +24,7 @@ export default function Home() { return () => { typed.destroy(); }; - }, []); + }, [i18n.language]); return ( diff --git a/src/pages/projects/index.tsx b/src/pages/projects/index.tsx index ce300ac..6cf9819 100644 --- a/src/pages/projects/index.tsx +++ b/src/pages/projects/index.tsx @@ -10,7 +10,7 @@ import { ProjectStars, } from './styles'; import { MainContainer } from '../../components/MainContent/styles'; -import { t } from 'i18next'; +import { useTranslation } from 'react-i18next'; interface Repo { name: string; @@ -21,6 +21,7 @@ interface Repo { } export default function Projects() { + const { t } = useTranslation(); const [projects, setProjects] = useState([]); useEffect(() => { diff --git a/src/pages/skills/index.tsx b/src/pages/skills/index.tsx index 3ce3cd6..1852f4b 100644 --- a/src/pages/skills/index.tsx +++ b/src/pages/skills/index.tsx @@ -2,9 +2,10 @@ 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"; +import { useTranslation } from "react-i18next"; export default function Skills() { + const { t } = useTranslation(); return (

{t("skills")}