import styled from '@emotion/styled'; import {Tooltip} from 'sentry/components/tooltip'; import {tct} from 'sentry/locale'; import type {Level} from 'sentry/types/event'; import {capitalize} from 'sentry/utils/string/capitalize'; const DEFAULT_SIZE = '13px'; type Props = { className?: string; level?: Level; size?: string; }; function ErrorLevel({className, level = 'unknown', size = '11px'}: Props) { const levelLabel = tct('Level: [level]', {level: capitalize(level)}); return ( {levelLabel} ); } const ColoredCircle = styled('span')` padding: 0; position: relative; width: ${p => p.size || DEFAULT_SIZE}; height: ${p => p.size || DEFAULT_SIZE}; text-indent: -9999em; display: inline-block; border-radius: 50%; flex-shrink: 0; background-color: ${p => (p.level ? p.theme.level[p.level] : p.theme.level.error)}; `; export default ErrorLevel;