translation (i18n)

src/App.tsx

@@ -3,6 +3,7 @@ import { theme } from './theme';
 import { GlobalStyles } from './components/styles/Global.styled';
 import Navbar from './components/Navbar';
 import LandingSection from './components/LandingSection';
+import './i18n';
 
 function App() {
   return (

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;
+`;

src/i18n.ts

@@ -0,0 +1,25 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import localePL from './locales/pl.json';
+import localeEN from './locales/en.json';
+
+const resources = {
+  en: {
+    translation: localeEN,
+  },
+  pl: {
+    translation: localePL,
+  },
+};
+
+i18n.use(initReactI18next).init({
+  resources,
+  lng: 'pl',
+
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+export default i18n;

src/locales/en.json

@@ -0,0 +1,9 @@
+{
+  "navbar": {
+    "title": "Spythere Portfolio",
+    "home": "HOME",
+    "about": "ABOUT",
+    "projects": "PROJECTS",
+    "contact": "CONTACT"
+  }
+}

src/locales/pl.json

@@ -0,0 +1,9 @@
+{
+  "navbar": {
+    "title": "Spythere Portfolio",
+    "home": "",
+    "about": "O MNIE",
+    "projects": "PROJEKTY",
+    "contact": "KONTAKT"
+  }
+}