1import { mergeClasses } from '@expo/styleguide'; 2import { Stars02Icon } from '@expo/styleguide-icons'; 3 4import { TagProps } from './Tag'; 5import { labelStyle, tagStyle, tagToCStyle } from './styles'; 6 7import { formatName, TAG_CLASSES } from '~/ui/components/Tag/helpers'; 8 9type StatusTagProps = Omit<TagProps, 'name'> & { 10 status: 'deprecated' | 'experimental' | string; 11 note?: string; 12}; 13 14export const StatusTag = ({ status, type, note, className }: StatusTagProps) => { 15 return ( 16 <div 17 className={mergeClasses( 18 status === 'deprecated' && TAG_CLASSES['deprecated'], 19 status === 'experimental' && TAG_CLASSES['experimental'], 20 className 21 )} 22 css={[tagStyle, type === 'toc' && tagToCStyle]}> 23 {status === 'experimental' && <Stars02Icon className="icon-xs text-palette-pink11" />} 24 <span css={labelStyle}>{status ? formatName(status) + (note ? `: ${note}` : '') : note}</span> 25 </div> 26 ); 27}; 28