import { ReactElement } from 'react' ; import { Badge , Tag } from '../../types' ; import { BlueTag , Tag as DefaultTag } from './Tags' ; type TagGroupProps = { tags ? : ( Tag | Badge ) [ ] ; } ; function isBadge ( tag ) { return tag . label !== undefined || tag . color !== undefined ; } export const TagGroup = ( { tags = [ ] } ) : ReactElement | null => { if ( ! tags || ! tags . length ) return null ; return ( < > { tags . map ( ( tag ) => isBadge ( tag ) ? ( < DefaultTag key = { `${ tag . id }-badge` } color = { tag . color } className = "tag is-rounded" > { tag . label } < /DefaultTag>) : (<BlueTag key={`${tag.id}-tag`} className="tag is-rounded has-text-white"> { tag . name } < /BlueTag>))} < />); } ;