@eureca/eureca-ui/src/components/StatusBall/index.js

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

import { Box } from '@material-ui/core';
import { colors } from '../../theme/colors';

const Ball = styled(Box)`
  border-radius: 4px;
  width: 8px;
  height: 8px;
  background-color: ${props => props.color};
  margin-right: 8px;
`;

function StatusBall({ color }) {
  return <Ball color={color} />;
}

StatusBall.propTypes = {
  color: PropTypes.string,
};

StatusBall.defaultProps = {
  color: colors.gray3,
};

export { StatusBall as Ball };