123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 |
- import type {Theme} from '@emotion/react';
- import styled from '@emotion/styled';
- import {Tooltip} from 'sentry/components/tooltip';
- export type StatusIndicatorProps = {
- status: 'muted' | 'info' | 'warning' | 'success' | 'resolved' | 'error';
- tooltipTitle: React.ReactNode;
- };
- /**
- * A badge/indicator at the beginning of the row that displays
- * the color of the status level (Warning, Error, Success, etc)
- *
- */
- function StatusIndicator({status, tooltipTitle}: StatusIndicatorProps) {
- let color: keyof Theme['alert'] = 'error';
- if (status === 'muted') {
- color = 'muted';
- } else if (status === 'info') {
- color = 'info';
- } else if (status === 'warning') {
- color = 'warning';
- } else if (status === 'success' || status === 'resolved') {
- color = 'success';
- }
- return (
- <Tooltip title={tooltipTitle} skipWrapper>
- <StatusLevel color={color} />
- </Tooltip>
- );
- }
- export default StatusIndicator;
- const StatusLevel = styled('div')<{color: keyof Theme['alert']}>`
- position: absolute;
- left: -1px;
- width: 9px;
- height: 15px;
- border-radius: 0 3px 3px 0;
- background-color: ${p => p.theme.alert[p.color].background};
- & span {
- display: block;
- width: 9px;
- height: 15px;
- }
- `;
|