# All files / src/components header.tsx

100% Statements 2/2
75% Branches 6/8
100% Functions 1/1
100% Lines 2/2

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
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58

    7x

    1x

     import { type ReactNode, type HTMLAttributes, type FC } from 'react';
    import cn from 'classnames';

    import '../styles/components/header.scss';

    type HeaderProps = {
      /**
       * Component to display where the link to the home page will be
       */
      homepageLink?: ReactNode;
      /**
       * Search component
       */
      search?: ReactNode;
      /**
       * Secondary items
       */
      secondaryItems?: ReactNode;
      /**
       * Subtext
       */
      subtext?: ReactNode;
      /**
       * Flag representing if the header should be in a "negative" style
       */
      isNegative?: boolean;
    };

    const Header: FC<HeaderProps & HTMLAttributes<HTMLDivElement>> = ({
      search,
      secondaryItems,
      subtext,
      isNegative = false,
      className,
      homepageLink,
      children,
      ...props
    }) => (
      <div
        className={cn(className, 'header', { 'header--negative': isNegative })}
        {...props}
      >
        <div className="header__link">{homepageLink}</div>
        <div className="header__navigation">{children}</div>
        <div className="header__search">{search}</div>
        {(secondaryItems || subtext) && (
          <div className="header__secondary">
            {secondaryItems && (
              <div className="header__navigation">{secondaryItems}</div>
            )}
            {subtext && <small>{subtext}</small>}
          </div>
        )}
      </div>
    );

    export default Header;