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