errorCount.tsx 1000 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import ProjectBadge from 'sentry/components/idBadge/projectBadge';
  4. import {IconFire} from 'sentry/icons';
  5. import {space} from 'sentry/styles/space';
  6. import {Project} from 'sentry/types';
  7. type Props = {
  8. countErrors: number;
  9. className?: string;
  10. hideIcon?: boolean;
  11. project?: Project;
  12. };
  13. const ErrorCount = styled(({countErrors, project, className, hideIcon}: Props) =>
  14. countErrors ? (
  15. <span className={className}>
  16. {!hideIcon && (
  17. <Fragment>
  18. {project ? (
  19. <ProjectBadge project={project} disableLink hideName />
  20. ) : (
  21. <IconFire />
  22. )}
  23. </Fragment>
  24. )}
  25. {countErrors}
  26. </span>
  27. ) : (
  28. <span className={className}>0</span>
  29. )
  30. )`
  31. display: flex;
  32. align-items: center;
  33. gap: ${space(0.5)};
  34. color: ${p => (p.countErrors > 0 ? p.theme.red400 : 'inherit')};
  35. font-variant-numeric: tabular-nums;
  36. `;
  37. export default ErrorCount;