@patreon/studio/module/components/Badge/index.jsx

Patreon Studio Design System

import cx from 'classnames';
import React from 'react';
import { BodyText } from '~/components/BodyText';
import { FloatingAccessory } from '~/components/FloatingAccessory';
import styles from './Badge.module.css';
const positionToClassName = {
    'top-left': styles.positionTopLeft,
    'top-right': styles.positionTopRight,
    'bottom-left': styles.positionBottomLeft,
    'bottom-right': styles.positionBottomRight,
};
export function Badge({ shape = 'circle', position = 'top-right', offset = 0, variant, style, badgeContent, maxDigits, children, }) {
    if (badgeContent === undefined || badgeContent === '' || badgeContent === 0) {
        return children;
    }
    return (<FloatingAccessory accessory={<StandaloneBadge variant={variant} style={style} content={badgeContent} maxDigits={maxDigits} className={positionToClassName[position]}/>} shape={shape} position={position} offset={offset}>
      {children}
    </FloatingAccessory>);
}
export function StandaloneBadge({ variant = 'primary', style = 'text', content, maxDigits = 2, className, }) {
    if (content === undefined || content === '' || content === 0) {
        return null;
    }
    const sharedClassList = cx({
        [styles.variantPrimary]: variant === 'primary',
        [styles.variantSecondary]: variant === 'secondary',
    });
    if (style === 'dot' || content === undefined) {
        return <div className={cx(styles.dot, sharedClassList, className)}/>;
    }
    return (<div className={cx(styles.text, sharedClassList, className)}>
      <BodyText as="div" size="sm" color="inherit">
        {typeof content === 'number'
            ? Math.log10(content) > maxDigits
                ? `${(Math.pow(10, maxDigits) - 1).toString()}+`
                : Math.floor(content).toString()
            : content}
      </BodyText>
    </div>);
}
//# sourceMappingURL=index.jsx.map