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