Implemented update UI

2 files changed, 139 insertions, 0 deletions

diff --git a/client/src/pages/Update/FormOne/FormOne.jsx b/client/src/pages/Update/FormOne/FormOne.jsx
new file mode 100644
index 0000000..5861971
--- /dev/null
+++ b/client/src/pages/Update/FormOne/FormOne.jsx
@@ -0,0 +1,92 @@
+import React from 'react'
+import Header from '../../../components/Header/Header'
+import UpdateInput from '../../../components/UpdateInput/UpdateInput'
+import styles from './FormOne.module.css'
+import EditButton from '../../../components/EditButton/EditButton'
+import Gender from '../../../components/Gender/Gender'
+
+const FormOne = ({ formData, setFormData }) => {
+  const handleSubmit = () => {
+  }
+
+  const [editable, setEditable] = React.useState(true)
+
+  const handleEdit = () => {
+    setEditable(!editable)
+  }
+
+  return (
+    <><Header subheading="Update" /><form onSubmit={() => handleSubmit()}>
+      <div className={styles.formone}>
+        <UpdateInput
+          type="text"
+          id="fullName"
+          label="Full Name"
+          value={formData.name}
+          onChange={(e) => {
+            setFormData({
+              ...formData,
+              name: e.target.value
+            })
+          }}
+          placeholder="Enter your full name" />
+
+      <UpdateInput
+        id="mobile"
+        value={formData.mobile}
+        label="Mobile"
+        type="text"
+        onChange={(e) => {
+          setFormData({
+            ...formData,
+            mobile: e.target.value
+          })
+        }}
+        placeholder="Enter your Mobile Number" />
+
+        <div className={styles.formone__dob}>
+          <label htmlFor="dob">Date of Birth</label>
+          <div className={styles.input__edit}>
+          <input
+            className={styles.formone__dob_input}
+            type="date"
+            id="dob"
+            name="dob"
+            value={formData.dob}
+            readOnly={editable}
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                dob: e.target.value
+              })
+            }}
+            required />
+          <EditButton
+          onClick={handleEdit}
+          enabled={!editable ? '1' : '0' } />
+          </div>
+        </div>
+
+      <UpdateInput
+        id="email"
+        value={formData.email}
+        label="Email"
+        type="email"
+        onChange={(e) => {
+          setFormData({
+            ...formData,
+            email: e.target.value
+          })
+        }}
+        placeholder="Enter your Email ID" />
+
+      <Gender
+      formData={formData}
+      setFormData={setFormData} />
+
+      </div>
+    </form></>
+  )
+}
+
+export default FormOne
diff --git a/client/src/pages/Update/FormOne/FormOne.module.css b/client/src/pages/Update/FormOne/FormOne.module.css
new file mode 100644
index 0000000..abde7ef
--- /dev/null
+++ b/client/src/pages/Update/FormOne/FormOne.module.css
@@ -0,0 +1,47 @@
+.formone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: 'Barlow';
+  font-size: var(--font-medium-s);
+}
+
+.formone__radio {
+  display: flex;
+  align-items: center;
+}
+
+.formone__resident {
+  display: flex;
+  align-items: center;
+  margin: 15px;
+}
+
+.formone__resident input[type='radio'] {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.formone__dob {
+  display: flex;
+  flex-direction: column;
+}
+
+.formone__dob input[type='date']::-webkit-calendar-picker-indicator {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+
+.formone__dob_input {
+  width: 300px;
+  margin: 10px 0px;
+  padding: 11px 10px;
+  border: 3px solid;
+  border-radius: 10px;
+}
+
+.input__edit{
+  display: flex;
+  flex-direction: row;
+}