36 lines
873 B
JavaScript
36 lines
873 B
JavaScript
import { getActiveClasses } from 'get-active-classes'
|
|
|
|
const InputText = ({ value, isEditable, onChange, className }) => {
|
|
return (
|
|
<>
|
|
<div
|
|
className={getActiveClasses(
|
|
'relative inline-block',
|
|
{ hidden: !isEditable },
|
|
className
|
|
)}
|
|
>
|
|
<div className="absolute inset-0 mb-2 rounded bg-gray-200 shadow-inner" />
|
|
<input
|
|
className="pl-2 pt-1 text-indigo-800 font-medium mb-px pb-px bg-transparent relative"
|
|
onChange={onChange}
|
|
value={value}
|
|
readOnly={!onChange}
|
|
type="text"
|
|
/>
|
|
</div>
|
|
<span
|
|
className={getActiveClasses(
|
|
'pl-2 text-indigo-800 font-medium mb-px pb-px',
|
|
{ hidden: isEditable },
|
|
className
|
|
)}
|
|
>
|
|
{value}
|
|
</span>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default InputText
|