Style part profile editable state

2020-11-07 19:45:37 +11:00
parent 1bdc836b66
commit 0784cdbde2
15 changed files with 225 additions and 108 deletions
--- a/web/src/components/InputText/InputText.js
+++ b/web/src/components/InputText/InputText.js
@@ -0,0 +1,21 @@
+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 bg-gray-100" />
+        <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