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