1import type { PropsWithChildren } from 'react'; 2 3import { 4 H3Code, 5 STYLES_APIBOX, 6 STYLES_APIBOX_WRAPPER, 7} from '~/components/plugins/api/APISectionUtils'; 8import { PlatformName } from '~/types/common'; 9import { PlatformTags } from '~/ui/components/Tag'; 10import { MONOSPACE } from '~/ui/components/Text'; 11 12type APIBoxProps = PropsWithChildren<{ 13 header?: string; 14 platforms?: PlatformName[]; 15 className?: string; 16}>; 17 18export const APIBox = ({ header, platforms, children, className }: APIBoxProps) => { 19 return ( 20 <div css={[STYLES_APIBOX, STYLES_APIBOX_WRAPPER]} className={className}> 21 {platforms && <PlatformTags prefix="Only for:" platforms={platforms} />} 22 {header && ( 23 <H3Code tags={platforms}> 24 <MONOSPACE weight="medium">{header}</MONOSPACE> 25 </H3Code> 26 )} 27 {children} 28 </div> 29 ); 30}; 31