import React , { FunctionComponent } from 'react' ; import { EuiIcon } from '@elastic/eui' ; import { Phases } from '../../../../../../common/types' ; import './phase_icon.scss' ; interface Props { enabled : boolean ; phase : string & keyof Phases ; } export const PhaseIcon = ( { enabled , phase } ) => { return ( < div className = { `ilmPhaseIcon ilmPhaseIcon--${ phase } ${ enabled ? '' : 'ilmPhaseIcon--disabled' }` } > { enabled ? ( < EuiIcon className = { `ilmPhaseIcon__inner--${ phase }` } type = { phase === 'delete' ? 'trash' : 'checkInCircleFilled' } size = { phase === 'delete' ? 'm' : 'l' } />) : (<EuiIcon className="ilmPhaseIcon__inner--disabled" type={'dot'} size={'s'}/ > ) } < /div>); } ;