feat: use translations in header and footer

martapanc · Aug 26, 2023 · 8daee3b · 8daee3b
1 parent a31fda4
commit 8daee3b
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --port 3001",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import { IconType } from 'react-icons';
 import { FiMail } from 'react-icons/fi';
 import {
@@ -31,6 +32,8 @@ export default function Footer() {
 }
 
 function FooterLinks() {
+  const { t } = useTranslation();
+
   return (
     <div className='flex flex-wrap justify-center gap-x-8 gap-y-4'>
       {footerLinks.map(({ href, label }) => (
@@ -39,7 +42,7 @@ function FooterLinks() {
           className='animated-underline focus-visible:ring-primary-300 rounded-sm text-sm font-medium text-blue-950 focus:outline-none focus-visible:ring dark:text-gray-200'
           href={href}
         >
-          {label}
+          {t(label)}
         </UnstyledLink>
       ))}
     </div>
@@ -85,31 +88,31 @@ type FooterLink = {
 const footerLinks: FooterLink[] = [
   {
     href: 'https://martas.links',
-    label: 'Links',
+    label: 'footerMenu.links',
   },
   {
     href: 'https://github.com/martapanc/martacodes.it',
-    label: 'Source Code',
+    label: 'footerMenu.sourceCode',
   },
   {
     href: 'https://martapancaldi.hashnode.dev/',
-    label: 'Blog',
+    label: 'footerMenu.blog',
   },
   {
     href: 'https://www.polywork.com/marta_pancaldi',
-    label: 'Updates',
+    label: 'footerMenu.updates',
   },
   {
     href: '/',
-    label: 'Analytics',
+    label: 'footerMenu.analytics',
   },
   {
     href: '/',
-    label: 'Guestbook',
+    label: 'footerMenu.guestbook',
   },
   {
     href: '/',
-    label: 'Feedback',
+    label: 'footerMenu.feedback',
   },
 ];
 

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -7,6 +7,7 @@ import { usePathname } from 'next/navigation';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 import Headroom from 'react-headroom';
+import { useTranslation } from 'react-i18next';
 import { AiFillCaretDown, AiFillCaretUp } from 'react-icons/ai';
 
 import { useOnKeyDown } from '@/hooks/useOnKeyDown';
@@ -17,13 +18,15 @@ import UnstyledLink from '@/components/links/UnstyledLink';
 import { MobileMenu } from '@/components/molecules/MobileMenu/MobileMenu';
 
 export const links = [
-  { href: '/projects', label: 'Projects' },
-  { href: '/cv', label: 'CV' },
-  { href: '/uses', label: 'Uses' },
-  { href: '/contact', label: 'Contact' },
+  { href: '/projects', label: 'headerMenu.projects' },
+  { href: '/cv', label: 'headerMenu.cv' },
+  { href: '/uses', label: 'headerMenu.uses' },
+  { href: '/contact', label: 'headerMenu.contact' },
 ];
 
 export default function Header() {
+  const { t } = useTranslation();
+
   const [isOpen, setIsOpen] = useState(false);
 
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -74,7 +77,7 @@ export default function Header() {
                   aria-expanded={open ? 'true' : undefined}
                   onClick={handleClick}
                 >
-                  About
+                  {t('headerMenu.about')}
                   {!open && <AiFillCaretDown className='ms-1.5' />}
                   {open && <AiFillCaretUp className='ms-1.5' />}
                 </span>
@@ -88,10 +91,14 @@ export default function Header() {
                   }}
                 >
                   <MenuItem onClick={handleClose}>
-                    <Link href='/about/work'>👔 Work & Career</Link>
+                    <Link href='/about/work'>
+                      👔 {t('headerMenu.aboutWork')}
+                    </Link>
                   </MenuItem>
                   <MenuItem onClick={handleClose}>
-                    <Link href='/about/free-time'>🪁 Free Time</Link>
+                    <Link href='/about/free-time'>
+                      🪁 {t('headerMenu.aboutFreeTime')}
+                    </Link>
                   </MenuItem>
                 </Menu>
               </li>
@@ -102,7 +109,7 @@ export default function Header() {
                     href={href}
                     className='animated-underline-2 dark:animated-underline rounded-sm font-medium text-slate-950 dark:text-blue-50'
                   >
-                    {label}
+                    {t(label)}
                   </UnstyledLink>
                 </li>
               ))}

diff --git a/src/components/molecules/MobileMenu/MobileMenu.tsx b/src/components/molecules/MobileMenu/MobileMenu.tsx
@@ -3,6 +3,7 @@
 import FocusTrap from 'focus-trap-react';
 import { AnimatePresence, motion } from 'framer-motion';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { NavigationItem } from '@/components/atoms/NavigationItem';
 import ModeToggleButton from '@/components/buttons/ModeToggleButton';
@@ -13,9 +14,11 @@ export interface MobileMenuProps {
 }
 
 export const MobileMenu = ({ isOpen }: MobileMenuProps) => {
+  const { t } = useTranslation();
+
   const mobileLinks = [
-    { href: '/about/work', label: 'About - Work' },
-    { href: '/about/free-time', label: 'About - Free Time' },
+    { href: '/about/work', label: 'headerMenu.aboutWorkMobile' },
+    { href: '/about/free-time', label: 'headerMenu.aboutFreeTimeMobile' },
     ...links,
   ];
   const navigationVariants = {
@@ -47,7 +50,7 @@ export const MobileMenu = ({ isOpen }: MobileMenuProps) => {
                 <NavigationItem
                   key={href}
                   href={href}
-                  title={label}
+                  title={t(label)}
                   variants={navigationVariants}
                   initial='hidden'
                   animate='visible'

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -8,7 +8,7 @@
     "projects": "Projects",
     "cv": "CV",
     "uses": "Uses",
-    "contact": "Contact"
+    "contact": "Contacts"
   },
   "footerMenu": {
     "links": "Links",