All files / Components Badge.js

100% Statements 7/7
100% Branches 8/8
100% Functions 1/1
100% Lines 7/7

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          3x                     99x   99x                                 99x   99x       3x                     3x              
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { NavLink } from 'react-router-dom';
 
const Badge = props => {
    let {
        tag,
        className,
        color,
        darkColor,
        shade,
        darkShade,
        pill,
        children,
        ...attributes
    } = props;
 
    const classes = classNames(
        'inline-flex',
        'items-center',
        'justify-center',
        'px-2',
        'py-1',
        'text-xs',
        'font-bold',
        'leading-none',
        'text-white',
        'dark:text-gray-800',
        `bg-${color}-${shade}`,
        `dark:${darkColor || color}-${darkShade}`,
        (pill ? 'rounded-full' : ''),
        className,
    );
 
    const Tag = attributes.to || attributes.href ? NavLink : tag;
 
    return <Tag className={classes} {...attributes}>{children}</Tag>
 
}
 
Badge.propTypes = {
    tag: PropTypes.string,
    className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
    innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
    color: PropTypes.string,
    darkColor: PropTypes.string,
    shade: PropTypes.string,
    darkShade: PropTypes.string,
    pill: PropTypes.bool
};
 
Badge.defaultProps = {
    tag: 'span',
    shade: '600',
    darkShade: '600',
}
 
export default Badge