timestampButton.tsx 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. import type {MouseEvent} from 'react';
  2. import styled from '@emotion/styled';
  3. import {DateTime} from 'sentry/components/dateTime';
  4. import {showPlayerTime} from 'sentry/components/replays/utils';
  5. import {Tooltip} from 'sentry/components/tooltip';
  6. import {IconPlay} from 'sentry/icons';
  7. import {space} from 'sentry/styles/space';
  8. type Props = {
  9. startTimestampMs: number;
  10. timestampMs: string | number | Date;
  11. className?: string;
  12. format?: 'mm:ss' | 'mm:ss.SSS';
  13. onClick?: (event: MouseEvent) => void;
  14. };
  15. function TimestampButton({
  16. className,
  17. format = 'mm:ss',
  18. onClick,
  19. startTimestampMs,
  20. timestampMs,
  21. }: Props) {
  22. return (
  23. <Tooltip title={<DateTime seconds date={timestampMs} />} skipWrapper>
  24. <StyledButton
  25. as={onClick ? 'button' : 'span'}
  26. onClick={onClick}
  27. className={className}
  28. >
  29. <IconPlay size="xs" />
  30. {showPlayerTime(timestampMs, startTimestampMs, format === 'mm:ss.SSS')}
  31. </StyledButton>
  32. </Tooltip>
  33. );
  34. }
  35. const StyledButton = styled('button')`
  36. background: transparent;
  37. border: none;
  38. color: inherit;
  39. font-variant-numeric: tabular-nums;
  40. line-height: 1.2em;
  41. display: flex;
  42. align-items: flex-start;
  43. align-self: baseline;
  44. gap: ${space(0.25)};
  45. padding: 0;
  46. height: 100%;
  47. `;
  48. export default TimestampButton;