@chayns-components/core/lib/esm/components/badge/Badge.js

A set of beautiful React components for developing your own applications with chayns.

import clsx from 'clsx';
import React, { useRef } from 'react';
import { useElementSize } from '../../hooks/element';
import { StyledBadge } from './Badge.styles';
import { BadgeDesign, BadgeSize } from '../../types/badge';
const BADGE_SIZES = {
  0: {
    font: '70%',
    padding: '0 6px'
  },
  1: {
    font: '80%',
    padding: '2px 8px 0 8px'
  }
};
const Badge = _ref => {
  let {
    backgroundColor,
    children,
    className,
    fontColor,
    onClick,
    design = BadgeDesign.DEFAULT,
    size: badgeSize = BadgeSize.DEFAULT
  } = _ref;
  const badgeClasses = clsx('beta-chayns-badge ellipsis', className);
  const badgeRef = useRef(null);
  const size = useElementSize(badgeRef);

  // Add 4px to the height to account for the padding
  const borderRadius = size ? `${(size.height + 4) / 2}px` : '15px';
  const minWidth = size ? `${size.height + 4}px` : '1.65rem';
  return /*#__PURE__*/React.createElement(StyledBadge, {
    className: badgeClasses,
    onClick: onClick,
    ref: badgeRef,
    $backgroundColor: backgroundColor,
    $borderRadius: borderRadius,
    $cursor: typeof onClick === 'function' ? 'pointer' : 'default',
    $fontColor: fontColor,
    $design: design,
    $size: BADGE_SIZES[badgeSize],
    $minWidth: minWidth
  }, children || '​');
};
Badge.displayName = 'Badge';
export default Badge;
//# sourceMappingURL=Badge.js.map