# All files / src/components bubble.tsx

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

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

    10x

    8x
    7x

    8x
    2x

    8x

     import { type HTMLAttributes, type ReactNode } from 'react';
    import cn from 'classnames';
    import type { Except } from 'type-fest';

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

    type Props = {
      /**
       * The number to display
       */
      children?: number;
      /**
       * The bubble size (default is medium)
       */
      size?: 'small' | 'medium' | 'large';
    };

    const Bubble = ({
      children,
      size = 'medium',
      className,
      ...props
    }: Props & Except<HTMLAttributes<HTMLSpanElement>, 'children'>) => {
      let displayValue: ReactNode | undefined;
      if (children !== undefined && Number.isFinite(children)) {
        displayValue = Math.round(children * 10) / 10;
      }
      if (children !== undefined && children > 99) {
        displayValue = '99+';
      }
      return (
        <span className={cn(className, `bubble--${size}`)} {...props}>
          {displayValue}
        </span>
      );
    };

    export default Bubble;