src/components/active-link.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

'use client';

import { isActive } from '@/lib/is-active';
import { cn } from '@/lib/utils';
import Link, { type LinkProps } from 'next/link';
import { usePathname } from 'next/navigation';
import type { ReactNode } from 'react';

type ActiveLinkProps = LinkProps & {
  children: ReactNode;
  href: string;
  target?: string;
  rel?: string;
  className?: string;
  nested?: boolean;
};

export const ActiveLink = ({
  href,
  children,
  className,
  nested = false,
  ...props
}: ActiveLinkProps) => {
  const pathname = usePathname();
  const active = isActive(href, pathname, nested);

  return (
    <Link
      href={href}
      target={props.target}
      rel={props.rel}
      className={cn(
        'text-muted-foreground text-sm transition-colors',
        'hover:text-foreground',
        active && 'font-medium text-foreground',
        className,
      )}
      {...props}
    >
      {children}
    </Link>
  );
};