{"size": 834, "ext": "js", "max_stars_repo_path": "packages/ui-core/src/Badge/Badge.js", "max_stars_repo_name": "hackoregon/civic", "max_stars_repo_stars_event_min_datetime": "2017-10-12T18:45:12.000Z", "max_stars_repo_stars_event_max_datetime": "2021-04-03T09:26:24.000Z", "max_issues_repo_path": "packages/ui-core/src/Badge/Badge.js", "max_issues_repo_name": "hackoregon/civic", "max_issues_repo_issues_event_min_datetime": "2017-10-13T00:00:43.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T14:37:15.000Z", "max_forks_repo_path": "packages/ui-core/src/Badge/Badge.js", "max_forks_repo_name": "hackoregon/civic", "max_forks_repo_forks_event_min_datetime": "2017-10-22T18:38:12.000Z", "max_forks_repo_forks_event_max_datetime": "2021-04-06T14:16:52.000Z"}
{"max_stars_count": 62, "max_issues_count": 730, "max_forks_count": 41, "avg_line_length": 21.9473684211, "max_line_length": 80, "alphanum_fraction": 0.675059952}
/* eslint-disable import/prefer-default-export */
/** @jsx jsx */
import { jsx, css } from "@emotion/core";
import PropTypes from "prop-types";
import { Badge as MaterialBadge } from "@material-ui/core";

const badgeClass = color => css`
  background-color: #ffffff;
  span {
    background-color: ${color};
  }
`;

/**
 * A Badge, using Material UI under the hood.
 * The badge is displayed over the children, which could be anything.
 */
export function Badge({ children, value, color }) {
  return (
    <MaterialBadge css={badgeClass(color)} badgeContent={value} color="primary">
      {children}
    </MaterialBadge>
  );
}

Badge.defaultProps = {
  value: 42,
  color: "#AAA4AB"
};

Badge.propTypes = {
  children: PropTypes.node.isRequired,
  value: PropTypes.number,
  color: PropTypes.string
};

Badge.displayName = "Badge";
