1import { css } from '@emotion/react'; 2import { spacing, theme } from '@expo/styleguide'; 3import { PropsWithChildren } from 'react'; 4 5import { HEADLINE } from '~/ui/components/Text'; 6 7type Props = PropsWithChildren<{ 8 label: string; 9}>; 10 11export const Step = ({ children, label }: Props) => { 12 return ( 13 <div css={stepWrapperStyle}> 14 <HEADLINE css={stepLabelStyle}>{label}</HEADLINE> 15 <div css={stepContentStyle}>{children}</div> 16 </div> 17 ); 18}; 19 20const stepWrapperStyle = css({ 21 display: 'inline-grid', 22 gridTemplateColumns: `${spacing[7]}px minmax(0, 1fr)`, 23 gap: spacing[4], 24 margin: `${spacing[2]}px 0`, 25 width: '100%', 26}); 27 28const stepLabelStyle = css({ 29 display: 'flex', 30 justifyContent: 'center', 31 alignItems: 'center', 32 margin: `${spacing[1]}px auto`, 33 width: spacing[7], 34 height: spacing[7], 35 background: theme.background.tertiary, 36 borderRadius: '100%', 37}); 38 39const stepContentStyle = css({ 40 paddingTop: spacing[1], 41 42 'h2:first-child': { 43 marginTop: -spacing[1], 44 }, 45 46 'h3:first-child, h4:first-child': { 47 marginTop: -spacing[0.5], 48 }, 49 50 'ul, ol': { 51 marginBottom: 0, 52 }, 53}); 54