# All files / src/components page-intro.tsx

100% Statements 2/2
100% Branches 5/5
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
    59
    60
    61
    62

    8x

    4x

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

    import { formatLargeNumber } from '../utils';

    import type { HeadingLevels } from '../types/common';

    import '../styles/components/page-intro.scss';

    type PageIntroProps = {
      /**
       * The title
       */
      heading: ReactNode;
      /**
       * The heading level
       */
      headingLevel?: HeadingLevels;
      /**
       * CSS classes to pass to the component heading
       */
      headingClassName?: string;
      /**
       * Optional heading postscript to follow resultsCount
       */
      headingPostscript?: ReactNode;
      /**
       * Number of results
       */
      resultsCount?: number;
    };

    const PageIntro: FC<PageIntroProps & HTMLAttributes<HTMLDivElement>> = ({
      heading,
      resultsCount,
      headingPostscript,
      headingLevel: HeadingLevel = 'h1',
      headingClassName,
      children,
      className,
      ...props
    }) => (
      <div className={cn(className, 'page-intro')} {...props}>
        <HeadingLevel className={cn(headingClassName)}>
          {heading}
          {resultsCount !== undefined && (
            /* Not sure why fragments and keys are needed, but otherwise gets the
            React key warnings messages and children are rendered as array... */
            <small key="count">
              {' '}
              {formatLargeNumber(resultsCount)} result
              {resultsCount === 1 ? '' : 's'}{' '}
            </small>
          )}
          {headingPostscript}
        </HeadingLevel>
        {children}
      </div>
    );

    export default PageIntro;