| 1 |
import React from 'react'; |
| 2 |
|
| 3 |
function InputField( props ) { |
| 4 |
const { attr } = props; |
| 5 |
|
| 6 |
const [ inputvalue, setInputvalue ] = React.useState( props.value ); |
| 7 |
|
| 8 |
function handleChange( e ) { |
| 9 |
setInputvalue( e.target.value ); |
| 10 |
} |
| 11 |
|
| 12 |
const type = props.type ? props.type : 'text'; |
| 13 |
return ( |
| 14 |
<> |
| 15 |
<div className="mb-3 xl:w-96"> |
| 16 |
<label |
| 17 |
htmlFor="exampleFormControlInput1" |
| 18 |
className="form-label inline-block mb-2 text-gray-700" |
| 19 |
> |
| 20 |
{ props.label } |
| 21 |
</label> |
| 22 |
|
| 23 |
<input |
| 24 |
{ ...attr } |
| 25 |
type={ type } |
| 26 |
className=" |
| 27 |
form-control |
| 28 |
block |
| 29 |
w-full |
| 30 |
px-3 |
| 31 |
py-1.5 |
| 32 |
text-base |
| 33 |
font-normal |
| 34 |
text-gray-700 |
| 35 |
bg-white bg-clip-padding |
| 36 |
border border-solid border-gray-300 |
| 37 |
rounded |
| 38 |
transition |
| 39 |
ease-in-out |
| 40 |
m-0 |
| 41 |
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none |
| 42 |
" |
| 43 |
name={ props.name } |
| 44 |
value={ inputvalue } |
| 45 |
id={ props.id } |
| 46 |
onChange={ handleChange } |
| 47 |
placeholder={ props.placeholder } |
| 48 |
min={ props.min } |
| 49 |
max={ props.max } |
| 50 |
readOnly={ props.readonly } |
| 51 |
></input> |
| 52 |
</div> |
| 53 |
</> |
| 54 |
); |
| 55 |
} |
| 56 |
|
| 57 |
export default InputField; |
| 58 |
|
