Implemented update UI

2 files changed, 67 insertions, 0 deletions

diff --git a/client/src/components/UpdateInput/UpdateInput.jsx b/client/src/components/UpdateInput/UpdateInput.jsx
new file mode 100644
index 0000000..8fa3ba1
--- /dev/null
+++ b/client/src/components/UpdateInput/UpdateInput.jsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import styles from './UpdateInput.module.css'
+import EditButton from '../EditButton/EditButton'
+
+const UpdateInput = ({ label, id, value, type, name, onChange, placeholder, maxLength, pattern, minLength, onInvalid, onValid, readOnly }) => {
+  const [editable, setEditable] = React.useState(true)
+
+  const handleEdit = () => {
+    setEditable(!editable)
+  }
+
+  return (
+    <div className={styles.input}>
+      <div className={styles.input__container}>
+        <label htmlFor={id}>{label}</label>
+        <div className={styles.input__edit}>
+        <input
+          className={styles.input__field}
+          type={type}
+          id={id}
+          name={name}
+          value={value}
+          onChange={onChange}
+          required
+          placeholder={placeholder}
+          pattern={pattern}
+          maxLength={maxLength}
+          minLength={minLength}
+          onInvalid={onInvalid}
+          onValid={onValid}
+          readOnly={editable}
+        />
+        <EditButton
+          onClick={handleEdit}
+          enabled={!editable ? '1' : '0' } />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default UpdateInput
diff --git a/client/src/components/UpdateInput/UpdateInput.module.css b/client/src/components/UpdateInput/UpdateInput.module.css
new file mode 100644
index 0000000..52e13a7
--- /dev/null
+++ b/client/src/components/UpdateInput/UpdateInput.module.css
@@ -0,0 +1,25 @@
+.input {
+  display: flex;
+  justify-content: center;
+  font-family: 'Barlow';
+  font-size: var(--font-medium-s);
+}
+
+.input__container {
+  display: flex;
+  flex-direction: column;
+}
+
+.input__edit{
+  display: flex;
+  flex-direction: row;
+}
+
+.input__field {
+  width: 300px;
+  margin: 10px 0px;
+  padding: 18px 10px;
+  border: 3px solid;
+  border-radius: 10px;
+  font-size: 1rem;
+}