sentry/static/app/views/replays/detail/browserOSIcons.tsx

import {Fragment} from 'react';

import ContextIcon from 'sentry/components/replays/contextIcon';
import {useReplayContext} from 'sentry/components/replays/replayContext';
import {Tooltip} from 'sentry/components/tooltip';

export default function BrowserOSIcons() {
  const {replay} = useReplayContext();
  const replayRecord = replay?.getReplay();

  return (
    <Fragment>
      <Tooltip title={`${replayRecord?.os.name} ${replayRecord?.os.version}`}>
        <ContextIcon
          name={replayRecord?.os.name ?? ''}
          version={replayRecord?.os.version ?? undefined}
          showVersion
        />
      </Tooltip>
      <Tooltip title={`${replayRecord?.browser.name} ${replayRecord?.browser.version}`}>
        <ContextIcon
          name={replayRecord?.browser.name ?? ''}
          version={replayRecord?.browser.version ?? undefined}
          showVersion
        />
      </Tooltip>
    </Fragment>
  );
}