import {Fragment} from 'react'; import styled from '@emotion/styled'; import emptyStateImg from 'sentry-images/spot/profiling-empty-state.svg'; import ButtonBar from 'sentry/components/buttonBar'; import OnboardingPanel from 'sentry/components/onboardingPanel'; import {t} from 'sentry/locale'; interface ProfilingOnboardingPanelProps { children: React.ReactNode; content?: React.ReactNode; } export function ProfilingOnboardingPanel(props: ProfilingOnboardingPanelProps) { return ( <OnboardingPanel image={<HeroImage src={emptyStateImg} />}> {props.content ? ( props.content ) : ( <Fragment> <h3>{t('Function level insights')}</h3> <p> {t( 'Discover slow-to-execute or resource intensive functions within your application' )} </p> </Fragment> )} <ButtonList gap={1}>{props.children}</ButtonList> </OnboardingPanel> ); } const HeroImage = styled('img')` @media (min-width: ${p => p.theme.breakpoints.small}) { user-select: none; position: absolute; top: 0; bottom: 0; width: 220px; margin-top: auto; margin-bottom: auto; transform: translateX(-50%); left: 50%; } @media (min-width: ${p => p.theme.breakpoints.large}) { transform: translateX(-55%); width: 300px; min-width: 300px; } @media (min-width: ${p => p.theme.breakpoints.xlarge}) { transform: translateX(-60%); width: 380px; min-width: 380px; } @media (min-width: ${p => p.theme.breakpoints.xxlarge}) { transform: translateX(-65%); width: 420px; min-width: 420px; } `; const ButtonList = styled(ButtonBar)` grid-template-columns: repeat(auto-fit, minmax(130px, max-content)); `;