From ec423572aaf8ecf80a409fd9a03d73b5d31e444f Mon Sep 17 00:00:00 2001
From: Blaster4385 <venkateshchaturvedi12@gmail.com>
Date: Sat, 13 Aug 2022 21:40:17 +0530
Subject: Implemented update UI

---
 client/src/components/Gender/Gender.jsx        | 60 ++++++++++++++++++++++++++
 client/src/components/Gender/Gender.module.css |  3 ++
 2 files changed, 63 insertions(+)
 create mode 100644 client/src/components/Gender/Gender.jsx
 create mode 100644 client/src/components/Gender/Gender.module.css

(limited to 'client/src/components/Gender')

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
diff --git a/client/src/components/Gender/Gender.module.css b/client/src/components/Gender/Gender.module.css
new file mode 100644
index 0000000..f84ba2a
--- /dev/null
+++ b/client/src/components/Gender/Gender.module.css
@@ -0,0 +1,3 @@
+.formone__gender {
+    display: flex;
+  }
\ No newline at end of file
-- 
cgit