monitorIcon.tsx 596 B

123456789101112131415161718192021222324
  1. import styled from '@emotion/styled';
  2. import {MonitorStatus} from '../types';
  3. export default styled('div')<{size: number; status: MonitorStatus}>`
  4. display: inline-block;
  5. position: relative;
  6. border-radius: 50%;
  7. height: ${p => p.size}px;
  8. width: ${p => p.size}px;
  9. ${p =>
  10. p.color
  11. ? `background: ${p.color};`
  12. : `background: ${
  13. p.status === 'error'
  14. ? p.theme.error
  15. : p.status === 'ok'
  16. ? p.theme.success
  17. : p.status === 'missed_checkin'
  18. ? p.theme.warning
  19. : p.theme.disabled
  20. };`};
  21. `;