active-link.tsx

'use client';

import { cn } from '@/app/lib/utils';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { ComponentProps, forwardRef } from 'react';

const ActiveLink = forwardRef<
  HTMLAnchorElement,
  ComponentProps<typeof Link> & {
    activeClass: string;
  }
>(({ href, className, children, activeClass, ...props }, ref) => {
  const pathname = usePathname();
  const active = pathname === href;

  return (
    <Link
      href={href}
      data-active={active}
      className={cn('group', className, active && activeClass)}
      ref={ref}
      {...props}
    >
      {children}
    </Link>
  );
});

ActiveLink.displayName = 'ActiveLink';

export default ActiveLink;