1import { css } from '@emotion/react'; 2import { spacing } from '@expo/styleguide-base'; 3import type { PropsWithChildren } from 'react'; 4 5import { CreateAppButton } from './CreateAppButton'; 6import { Icon } from './Icon'; 7 8import { APIBox } from '~/components/plugins/APIBox'; 9import { tableWrapperStyle } from '~/ui/components/Table/Table'; 10import { H3 } from '~/ui/components/Text'; 11 12type BoxProps = PropsWithChildren<{ 13 name: string; 14 image: string; 15 createUrl?: string; 16}>; 17 18export const Box = ({ name, image, createUrl, children }: BoxProps) => ( 19 <APIBox className="mt-6" css={boxStyle}> 20 <div className="inline-flex flex-row items-center gap-4 pb-4 w-full max-medium:gap-3 max-medium:flex-col"> 21 <div className="flex flex-row gap-3 items-center w-[inherit]"> 22 <Icon title={name} image={image} size={48} /> 23 <H3 style={{ marginBottom: 0 }}>{name}</H3> 24 </div> 25 {createUrl && <CreateAppButton name={name} href={createUrl} />} 26 </div> 27 {children} 28 </APIBox> 29); 30 31const boxStyle = css({ 32 [`.css-${tableWrapperStyle.name}`]: { 33 marginBottom: spacing[4], 34 }, 35}); 36