sentry/static/app/views/settings/project/server-side-sampling/promo.tsx

import styled from '@emotion/styled';

import onboardingServerSideSampling from 'sentry-images/spot/onboarding-server-side-sampling.svg';

import Button from 'sentry/components/button';
import ButtonBar from 'sentry/components/buttonBar';
import EmptyStateWarning from 'sentry/components/emptyStateWarning';
import {t} from 'sentry/locale';
import space from 'sentry/styles/space';

import {SERVER_SIDE_SAMPLING_DOC_LINK} from './utils';

type Props = {
  hasAccess: boolean;
  onGetStarted: () => void;
  onReadDocs: () => void;
};

export function Promo({onGetStarted, onReadDocs, hasAccess}: Props) {
  return (
    <StyledEmptyStateWarning withIcon={false}>
      <img src={onboardingServerSideSampling} />
      <Description>
        <h3>{t('Set sample rules for your project')}</h3>
        <p>
          {t(
            'Because every project is different – some need more events from high converting pages, critical API endpoints, or just want to focus on latency issues from the latest release – set multiple sample rules with different sample rates per project so you can keep what you need and drop what you don’t.'
          )}
        </p>
        <Actions gap={1}>
          <Button href={SERVER_SIDE_SAMPLING_DOC_LINK} onClick={onReadDocs} external>
            {t('Read Docs')}
          </Button>
          <Button
            priority="primary"
            onClick={onGetStarted}
            disabled={!hasAccess}
            title={
              hasAccess ? undefined : t('You do not have permission to set up rules')
            }
          >
            {t('Start Setup')}
          </Button>
        </Actions>
      </Description>
    </StyledEmptyStateWarning>
  );
}

const StyledEmptyStateWarning = styled(EmptyStateWarning)`
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: ${space(4)};
  grid-column: 1/-1;
  text-align: center;

  img {
    width: 320px;
  }

  && {
    display: flex;
    padding: ${space(4)};
  }

  @media (min-width: ${p => p.theme.breakpoints.large}) {
    text-align: left;
    flex-direction: row;
    img {
      width: 100%;
      max-width: 40%;
      min-width: 320px;
    }
  }
`;

const Actions = styled(ButtonBar)`
  justify-content: center;

  @media (min-width: ${p => p.theme.breakpoints.large}) {
    justify-content: flex-start;
  }
`;

const Description = styled('div')`
  justify-content: space-between;

  @media (min-width: ${p => p.theme.breakpoints.large}) {
    padding: ${space(4)};
    justify-content: flex-start;
  }

  p {
    font-size: ${p => p.theme.fontSizeLarge};
  }
`;