Function Header

components/header.tsx:20–59

()

    label: "Leaderboard",
  },
];

export default function Header() {
  return (
    <header className="absolute top-0 flex w-full min-w-0 items-center justify-between gap-2 p-2 sm:gap-4 sm:p-4">
      <div className="flex min-w-0 items-center gap-2 sm:gap-5">
        <Link className="shrink-0" href="/">
          <Image
            alt="GitHub Creature home"
            className="size-8 sm:size-[50px]"
            height={50}
            src="/github-creature-logo.png"
            width={50}
          />
        </Link>

        {navItems.map((item) => (
          <Link className="truncate text-sm" key={item.href} href={item.href}>
            {item.label}
          </Link>
        ))}
      </div>

      <div className="flex shrink-0 items-center gap-1 sm:gap-2">
        <Link
          aria-label="GitHub repository"
          className={cn(
            buttonVariants({ variant: "ghost" }),
            "size-8 px-0 sm:h-8 sm:w-auto sm:gap-2 sm:px-2"
          )}
          href="https://github.com/theorcdev/github-creature"
          rel="noopener noreferrer"
          target="_blank"
        >
          <HugeiconsIcon icon={Github} />
          <StarsCount />
        </Link>
        <ModeSwitcher />
      </div>
    </header>
  );
}