1import { css } from '@emotion/react'; 2import { breakpoints, spacing } from '@expo/styleguide'; 3 4import { CreateAppButton } from './CreateAppButton'; 5import { Icon } from './Icon'; 6 7import { APIBox } from '~/components/plugins/APIBox'; 8import { H3 } from '~/components/plugins/Headings'; 9 10type BoxProps = React.PropsWithChildren<{ 11 name: string; 12 image: string; 13 createUrl?: string; 14}>; 15 16export const Box = ({ name, image, createUrl, children }: BoxProps) => ( 17 <APIBox css={boxStyle}> 18 <div css={headerStyle}> 19 <div css={headerTitleStyle}> 20 <Icon title={name} image={image} size={48} /> 21 <H3>{name}</H3> 22 </div> 23 {createUrl && <CreateAppButton name={name} href={createUrl} />} 24 </div> 25 {children} 26 </APIBox> 27); 28 29const boxStyle = css({ 30 marginTop: spacing[6], 31}); 32 33const headerStyle = css({ 34 paddingBottom: spacing[4], 35 display: 'inline-flex', 36 flexDirection: 'row', 37 alignItems: 'center', 38 gap: spacing[4], 39 width: '100%', 40 41 [`@media screen and (max-width: ${(breakpoints.medium + breakpoints.large) / 2}px)`]: { 42 paddingTop: spacing[4], 43 gap: spacing[3], 44 flexDirection: 'column', 45 }, 46}); 47 48const headerTitleStyle = css({ 49 display: 'flex', 50 gap: spacing[3], 51 flexDirection: 'row', 52 alignItems: 'center', 53 width: 'inherit', 54 55 h3: { 56 marginBottom: 0, 57 }, 58}); 59