Header.tsx

import styles from "./Header.module.scss";
import Link from "next/link";
import Image from "next/image";
import { useRouter } from "next/router";
import { Button } from "@primer/react-brand";

export const Header = () => {
  const router = useRouter();
  const isTeams = router.pathname === "/teams";

  return (
    <>
      <header className={styles.siteHeader} data-color-mode="dark">
        <div>
          <Link href="/" className={styles.homeLink}>
            <Image
              src="/for-good-first-issue.svg"
              width={144}
              height={32}
              alt="For Good First Issue logo"
              style={{ height: "auto" }}
            />
          </Link>
          <nav className={styles.pageTabs}>
            <Link href="/" className={`${styles.pageTab} ${!isTeams ? styles.pageTabActive : ""}`}>
              For Individuals
            </Link>
            <Link
              href="/teams"
              className={`${styles.pageTab} ${isTeams ? styles.pageTabActive : ""}`}
            >
              For Teams
            </Link>
          </nav>
          <Button
            variant="primary"
            as="a"
            href="https://github.com/rubyforgood/happycommits/issues/new?assignees=&labels=💪+New+Project&projects=&template=suggest_project.yml&title=%5BNew+Project%5D%3A+%3Ctitle%3E"
            target="_blank"
            rel="noopener noreferrer"
          >
            <span className={styles.btnText}>Recommend a project</span>
          </Button>
        </div>
      </header>
    </>
  );
};