# All files / src/components/NavLink NavLink.js

100% Statements 4/4
100% Branches 9/9
100% Functions 1/1
100% Lines 4/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    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

    650x

    650x
    163x

    487x

     import { Link } from 'react-router-dom';
    import './NavLink.css';

    function NavLink({
      to,
      href,
      children,
      variant = 'secondary',
      theme = 'light',
      testId,
      external = false
    }) {
      const className = [
        'nav-link',
        `nav-link--${variant}`,
        theme === 'dark' ? 'nav-link--on-dark' : ''
      ]
        .filter(Boolean)
        .join(' ');

      if (external || href) {
        return (
          <a
            href={href}
            className={className}
            data-testid={testId}
            target="_blank"
            rel="noreferrer"
          >
            {children}
          </a>
        );
      }

      return (
        <Link to={to} className={className} data-testid={testId}>
          {children}
        </Link>
      );
    }

    export default NavLink;