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

import * as hi from "jsr:@preact-icons/hi2";

interface HeaderLink {
  name: string;
  linkTo: string;
  // deno-lint-ignore no-explicit-any
  icon: any;
  newTab?: boolean;
}

const headerLinks: Array<HeaderLink> = [
  {
    name: "Home",
    linkTo: "/",
    icon: <hi.HiOutlineHome />,
  },
  {
    name: "Blog",
    linkTo: "posts/",
    icon: <hi.HiOutlineBookmarkSquare />,
  },
  {
    name: "Projects",
    linkTo: "projects/",
    icon: <hi.HiOutlineWrenchScrewdriver />,
  },
  {
    name: "Contact",
    linkTo: "contact/",
    icon: <hi.HiOutlinePencilSquare />,
  },
];

export default function Header() {
  return (
    <nav>
      <div class="bg-[#313244] flex justify-center space-x-6 p-4">
        {headerLinks.map((l) => {
          const newTab = l.newTab ? "_blank" : "_self";
          return (
            <a
              href={l.linkTo}
              target={newTab}
              class="text-[#cdd6f4]
              text-lg 
              font-medium 
              transition-all 
              duration-300 
              ease-in-out
              hover:text-[#cba6f7]
              hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)]
              hover:scale-110
              cursor-pointer"
            >
              <div class="flex items-center gap-2">
                {l.icon} {l.name}
              </div>
            </a>
          );
        })}
      </div>
    </nav>
  );
}