@primer/components/lib-esm/CircleBadge.js

Primer react components

import styled from 'styled-components';
import { get } from './constants';
import StyledOcticon from './StyledOcticon';
import sx from './sx';
import isNumeric from './utils/isNumeric';
const variantSizes = {
  small: 56,
  medium: 96,
  large: 128
};

const sizeStyles = ({
  size,
  variant = 'medium'
}) => {
  const calc = isNumeric(size) ? size : variantSizes[variant];
  return {
    width: calc,
    height: calc
  };
};

const CircleBadge = styled.div.withConfig({
  displayName: "CircleBadge",
  componentId: "sc-1lho816-0"
})(["display:", ";align-items:center;justify-content:center;background-color:", ";border-radius:50%;box-shadow:", ";", ";", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.canvas.default'), get('shadows.shadow.medium'), sizeStyles, sx);
const CircleBadgeIcon = styled(StyledOcticon).withConfig({
  displayName: "CircleBadge__CircleBadgeIcon",
  componentId: "sc-1lho816-1"
})(["height:auto;max-width:60%;max-height:55%;"]);
CircleBadge.defaultProps = {
  inline: false
};
CircleBadgeIcon.displayName = 'CircleBadge.Icon';
export default Object.assign(CircleBadge, {
  Icon: CircleBadgeIcon
});