Implemented update UI

1 files changed, 60 insertions, 0 deletions

diff --git a/client/src/components/Gender/Gender.jsx b/client/src/components/Gender/Gender.jsx
new file mode 100644
index 0000000..97e4d6e
--- /dev/null
+++ b/client/src/components/Gender/Gender.jsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import EditButton from '../../components/EditButton/EditButton'
+import LabelCard from '../LabelCard/LabelCard'
+import styles from './Gender.module.css'
+
+const Gender = ({ formData, setFormData }) => {
+    const [editable, setEditable] = React.useState(true)
+
+    const handleEdit = () => {
+      setEditable(!editable)
+    }
+  return (
+    <div className={styles.formone__gender}>
+    <LabelCard
+      id="male"
+      name="gender"
+      title="Male"
+      value={formData.gender}
+      readOnly={editable}
+      onChange={() => {
+        setFormData({
+          ...formData,
+          gender: 'Male'
+        })
+      }}
+      image={`${process.env.PUBLIC_URL}/assets/images/male.svg`} />
+    <LabelCard
+      id="female"
+      name="gender"
+      value={formData.gender}
+      title="Female"
+      readOnly={editable}
+      onChange={() => {
+        setFormData({
+          ...formData,
+          gender: 'Female'
+        })
+      }}
+      image={`${process.env.PUBLIC_URL}/assets/images/female.svg`} />
+    <LabelCard
+      id="trans"
+      name="gender"
+      value={formData.gender}
+      title="Transgender"
+      readOnly={editable}
+      onChange={() => {
+        setFormData({
+          ...formData,
+          gender: 'Transgender'
+        })
+      }}
+      image={`${process.env.PUBLIC_URL}/assets/images/trans.svg`} />
+    <EditButton
+    onClick={handleEdit}
+    enabled={!editable ? '1' : '0' } />
+  </div>
+  )
+}
+
+export default Gender