translation (i18n)

src/components/Navbar.tsx

@@ -1,4 +1,11 @@
-import { StyledNavbar, StyledNavlink, StyledNavlinkBrand, StyledNavlinkList } from './styles/Navbar.styled';
+import { useTranslation } from 'react-i18next';
+import {
+  StyledLangButton,
+  StyledNavbar,
+  StyledNavlink,
+  StyledNavlinkBrand,
+  StyledNavlinkList,
+} from './styles/Navbar.styled';
 
 interface NavLink {
   title: string;
@@ -6,46 +13,62 @@ interface NavLink {
 }
 
 function NavlinkList(props: { navlinks: NavLink[] }) {
+  const { t } = useTranslation();
+
   return (
     <>
       <StyledNavlinkList>
         {props.navlinks.map((navlink) => (
           <StyledNavlink key={navlink.title} href={navlink.href}>
-            {navlink.title}
+            {t(`navbar.${navlink.title}`)}
           </StyledNavlink>
         ))}
+
+        <LanguageChoice />
       </StyledNavlinkList>
     </>
   );
 }
 
-function NavlinkBrand(props: { name: string }) {
-  return <StyledNavlinkBrand>{props.name}</StyledNavlinkBrand>;
+function LanguageChoice() {
+  const { i18n } = useTranslation();
+
+  function changeLanguage() {
+    i18n.changeLanguage(i18n.language == 'pl' ? 'en' : 'pl');
+  }
+
+  return (
+    <>
+      <StyledLangButton onClick={changeLanguage}>{i18n.language}</StyledLangButton>
+    </>
+  );
 }
 
 const navlinks = [
+  // {
+  //   title: 'home',
+  //   href: '#',
+  // },
   {
-    title: 'HOME',
+    title: 'about',
     href: '#',
   },
   {
-    title: 'ABOUT',
+    title: 'projects',
     href: '#',
   },
   {
-    title: 'PROJECTS',
-    href: '#',
-  },
-  {
-    title: 'CONTACT',
+    title: 'contact',
     href: '#',
   },
 ];
 
 export default function Navbar() {
+  const { t } = useTranslation();
+
   return (
     <StyledNavbar>
-      <NavlinkBrand name="Spythere Portfolio" />
+      <StyledNavlinkBrand>{t('navbar.title')}</StyledNavlinkBrand>
       <NavlinkList navlinks={navlinks} />
     </StyledNavbar>
   );