{"size": 837, "ext": "js", "max_stars_repo_path": "src/components/Decorations/AdminBadge.js", "max_stars_repo_name": "techrome/test-task-user-dashboard", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Decorations/AdminBadge.js", "max_issues_repo_name": "techrome/test-task-user-dashboard", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Decorations/AdminBadge.js", "max_forks_repo_name": "techrome/test-task-user-dashboard", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 25.3636363636, "max_line_length": 75, "alphanum_fraction": 0.6009557945}
import React from 'react';
import { VpnKey as VpnKeyIcon } from '@material-ui/icons';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  main: {
    padding: (props) =>
      props.size === 'large' ? theme.spacing(1, 2) : theme.spacing(0.5, 1),
    backgroundColor: (props) =>
      props.disabled ? 'transparent' : theme.palette.tertiary.main,
    display: 'flex',
    borderRadius: '30px',
    '& .MuiSvgIcon-root': {
      color: (props) =>
        props.disabled
          ? theme.palette.action.disabled
          : theme.palette.tertiary.contrastText,
    },
  },
}));

const AdminBadge = ({ disabled, size, ...props }) => {
  const cls = useStyles({ disabled, size });

  return (
    <div className={cls.main}>
      <VpnKeyIcon />
    </div>
  );
};

export default AdminBadge;
