spythere-portfolio/src/components/Navbar.tsx

import { useTranslation } from 'react-i18next';
import {
  StyledLangButton,
  StyledNavbar,
  StyledNavlink,
  StyledNavlinkBrand,
  StyledNavlinkList,
} from './styles/Navbar.styled';

interface NavLink {
  title: string;
  href: string;
}

function NavlinkList(props: { navlinks: NavLink[] }) {
  const { t } = useTranslation();

  return (
    <>
      <StyledNavlinkList>
        {props.navlinks.map((navlink) => (
          <StyledNavlink key={navlink.title} href={navlink.href}>
            {t(`navbar.${navlink.title}`)}
          </StyledNavlink>
        ))}

        <LanguageChoice />
      </StyledNavlinkList>
    </>
  );
}

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: 'about',
    href: '#',
  },
  {
    title: 'projects',
    href: '#',
  },
  {
    title: 'contact',
    href: '#',
  },
];

export default function Navbar() {
  const { t } = useTranslation();

  return (
    <StyledNavbar>
      <StyledNavlinkBrand>{t('navbar.title')}</StyledNavlinkBrand>
      <NavlinkList navlinks={navlinks} />
    </StyledNavbar>
  );
}