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 |