@krowdy-ui/core/es/Dot/Dot.js

React components that implement Google's Material Design.

import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/styles';
import Tooltip from '@material-ui/core/Tooltip';
const useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: ({
      color
    }) => {
      switch (color) {
        case 'success':
          {
            return theme.palette.success.main;
          }

        case 'error':
          {
            return theme.palette.error.main;
          }

        case 'primary':
          {
            return theme.palette.primary.main;
          }

        default:
          {
            return theme.palette.grey[500];
          }
      }
    },
    borderRadius: '50%',
    display: 'inline-block',
    height: 8,
    width: 8
  }
}));

const Dot = ({
  color = 'default',
  title
}) => {
  const classes = useStyles({
    color
  });
  if (title) return /*#__PURE__*/React.createElement(Tooltip, {
    title: title
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }));
  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  });
};

process.env.NODE_ENV !== "production" ? Dot.propTypes = {
  color: PropTypes.string,
  title: PropTypes.string
} : void 0;
export default Dot;