spythere-portfolio/src/components/Navbar.tsx

import { StyledNavbar, StyledNavlink, StyledNavlinkBrand, StyledNavlinkList } from './styles/Navbar.styled';

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

function NavlinkList(props: { navlinks: NavLink[] }) {
  return (
    <>
      <StyledNavlinkList>
        {props.navlinks.map((navlink) => (
          <StyledNavlink key={navlink.title} href={navlink.href}>
            {navlink.title}
          </StyledNavlink>
        ))}
      </StyledNavlinkList>
    </>
  );
}

function NavlinkBrand(props: { name: string }) {
  return <StyledNavlinkBrand>{props.name}</StyledNavlinkBrand>;
}

const navlinks = [
  {
    title: 'HOME',
    href: '#',
  },
  {
    title: 'ABOUT',
    href: '#',
  },
  {
    title: 'PROJECTS',
    href: '#',
  },
  {
    title: 'CONTACT',
    href: '#',
  },
];

export default function Navbar() {
  return (
    <StyledNavbar>
      <NavlinkBrand name="Spythere Portfolio" />
      <NavlinkList navlinks={navlinks} />
    </StyledNavbar>
  );
}