statusIndicator.tsx 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. import type {Theme} from '@emotion/react';
  2. import styled from '@emotion/styled';
  3. import {Tooltip} from 'sentry/components/tooltip';
  4. export type StatusIndicatorProps = {
  5. status: 'muted' | 'info' | 'warning' | 'success' | 'resolved' | 'error';
  6. tooltipTitle: React.ReactNode;
  7. };
  8. /**
  9. * A badge/indicator at the beginning of the row that displays
  10. * the color of the status level (Warning, Error, Success, etc)
  11. *
  12. */
  13. function StatusIndicator({status, tooltipTitle}: StatusIndicatorProps) {
  14. let color: keyof Theme['alert'] = 'error';
  15. if (status === 'muted') {
  16. color = 'muted';
  17. } else if (status === 'info') {
  18. color = 'info';
  19. } else if (status === 'warning') {
  20. color = 'warning';
  21. } else if (status === 'success' || status === 'resolved') {
  22. color = 'success';
  23. }
  24. return (
  25. <Tooltip title={tooltipTitle} skipWrapper>
  26. <StatusLevel color={color} />
  27. </Tooltip>
  28. );
  29. }
  30. export default StatusIndicator;
  31. const StatusLevel = styled('div')<{color: keyof Theme['alert']}>`
  32. position: absolute;
  33. left: -1px;
  34. width: 9px;
  35. height: 15px;
  36. border-radius: 0 3px 3px 0;
  37. background-color: ${p => p.theme.alert[p.color].background};
  38. & span {
  39. display: block;
  40. width: 9px;
  41. height: 15px;
  42. }
  43. `;