import { memo } from 'react' ; import { useFormikContext } from 'formik' ; import { Input , InputGroup , Stack , StackProps , Text } from '@stacks/ui' ; import { ErrorLabel } from '@app/components/error-label' ; interface FieldProps extends StackProps { value : string ; error ? : string ; } export const MemoField = memo ( ( { value , error , ... props } ) => { const { handleChange } = useFormikContext ( ) ; return ( < Stack width = "100%" { ... props } > < InputGroup flexDirection = "column" > < Text as = "label" display = "block" mb = "tight" fontSize = { 1 } fontWeight = "500" htmlFor = "memo" > Memo < /Text> < Input display = "block" type = "string" width = "100%" name = "memo" value = { value } onChange = { handleChange } placeholder = "Enter an message (optional)" autoComplete = "off" / > < /InputGroup> { error && ( < ErrorLabel > < Text textStyle = "caption" > { error } < /Text> < /ErrorLabel>)} < /Stack>); } ) ;