import React from 'react'; import { observer } from 'mobx-react-lite'; import { Button } from 'UI'; import cn from 'classnames'; import FeatureFlag from 'App/mstore/types/FeatureFlag'; function Description({ isDescrEditing, current, setEditing, showDescription, }: { showDescription: boolean; isDescrEditing: boolean; current: FeatureFlag; setEditing: ({ isDescrEditing }: { isDescrEditing: boolean }) => void; }) { return ( <> Description (Optional) {isDescrEditing ? ( { if (current) current.setDescription(e.target.value); }} onBlur={() => setEditing({ isDescrEditing: false })} onFocus={() => setEditing({ isDescrEditing: true })} /> ) : showDescription ? ( setEditing({ isDescrEditing: true })} className={cn( 'cursor-pointer border-b w-fit', 'border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium' )} > {current.description} ) : ( setEditing({ isDescrEditing: true })} > Add )} > ); } export default observer(Description);