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

31 lines
674 B
TypeScript

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;