ActiveLink

active-link.tsx
Copy code
"use client";
 
import Link, { type LinkProps } from "next/link";
import { usePathname } from "next/navigation";
import { twMerge } from "tailwind-merge"; // can swap with shadcn `cn` util
 
type ActiveLinkProps = LinkProps &
  React.ComponentProps<"a"> & {
    activeClassName?: string;
  };
 
export const ActiveLink = ({
  className,
  activeClassName,
  href,
  ...props
}: ActiveLinkProps) => {
  const pathname = usePathname();
  const isActive = pathname === href;
 
  return (
    <Link
      href={href}
      className={twMerge(className, isActive && activeClassName)}
      {...props}
    />
  );
};
ActiveLink.displayName = "ActiveLink";

src/app/page.tsx
Copy code
<ActiveLink
  href="/snippets"
  className="text-blue-500 hover:text-blue-500/70"
  activeClassName="text-orange-500 hover:text-orange-500/70"
>
  Snippets
</ActiveLink>