my-website-v2/frontend/components/Header.tsx

interface HeaderLink {
  name: string;
  linkTo: string;
  newTab?: boolean;
}

const headerLinks: Array<HeaderLink> = [
  {
    name: "Home",
    linkTo: "/",
  },
  {
    name: "Blog",
    linkTo: "posts/",
  },
  {
    name: "Projects",
    linkTo: "projects",
  },
  {
    name: "Contact",
    linkTo: "contact/",
  },
];

export default function Header() {
  return (
    <div>
      {headerLinks.map((l) => {
        const newTab = l.newTab ? "_blank" : "_self";
        return (
          <div class="">
            <a href={l.linkTo} target={newTab} class="">
              {l.name}
            </a>
          </div>
        );
      })}
    </div>
  );
}