import { defineMessages, useIntl } from 'react-intl'; const messages = defineMessages({ no: { defaultMessage: 'No', description: '[General] Boolean', }, yes: { defaultMessage: 'Yes', description: '[General] Boolean', }, }); interface BoolViewProps { noColor?: boolean; option?: boolean; value: boolean; } export function BoolView({ noColor, option, value }: BoolViewProps) { const intl = useIntl(); let className: string | undefined; if (!noColor) { className = value ? 'success' : 'error'; } return option ? ( <option className={className} value={+value}> {intl.formatMessage(value ? messages.yes : messages.no)} </option> ) : ( <span className={className}>{intl.formatMessage(value ? messages.yes : messages.no)}</span> ); }