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>
   );

src/components/styles/Global.styled.ts

@@ -46,6 +46,10 @@ export const GlobalStyles = createGlobalStyle`
       }
    }
 
+   button {
+      border: none;
+   }
+
    @keyframes typing {
       to { left: 100% }
    }

src/components/styles/Navbar.styled.ts

@@ -19,6 +19,7 @@ export const StyledNavlinkBrand = styled.div`
 
 export const StyledNavlinkList = styled.div`
   display: flex;
+  align-items: center;
   gap: 1em;
   font-size: 1.1em;
 `;
@@ -27,3 +28,15 @@ export const StyledNavlink = styled.a`
   /* color: black; */
   font-weight: bold;
 `;
+
+export const StyledLangButton = styled.button`
+  font-size: 1em;
+  font-weight: bold;
+
+  padding: 0.25em 1em;
+  text-transform: uppercase;
+  cursor: pointer;
+
+  border: 1px solid ${({ theme }) => theme.colors.primary};
+  background: none;
+`;