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: `${Deno.env.get("BASE_URI_WEB")}/`,
    icon: <hi.HiOutlineHome />,
  },
  {
    name: "Blog",
    linkTo: `${Deno.env.get("BASE_URI_WEB")}/posts`,
    icon: <hi.HiOutlineBookmarkSquare />,
  },
  {
    name: "Projects",
    linkTo: `${Deno.env.get("BASE_URI_WEB")}/projects`,
    icon: <hi.HiOutlineWrenchScrewdriver />,
  },
  {
    name: "Contact",
    linkTo: `${Deno.env.get("BASE_URI_WEB")}/contact`,
    icon: <hi.HiOutlinePencilSquare />,
  },
];

export default function Header() {
  return (
    <header>
      <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>
    </header>
  );
}