drfeely.com/website/components/Navbar/NavLink.tsx

import Link from "next/link";
import { ReactNode } from "react";
import { usePathname } from "next/navigation";

interface Props {
  page: string;
  currentPageClasses: string;
  children: ReactNode;
}

const NavLink = ({ page, currentPageClasses, children }: Props) => {
  const defaultClasses =
    "font-bold drop-shadow hover:text-primary-100 transition-all duration-500 ";

  const currentPage = "/" + usePathname().split("/")[1];

  return (
    <Link
      className={
        currentPage === page
          ? defaultClasses + currentPageClasses
          : defaultClasses
      }
      href={page}
    >
      {children}
    </Link>
  );
};

export default NavLink;