diff options
Diffstat (limited to 'client/src/components/Gender')
| -rw-r--r-- | client/src/components/Gender/Gender.jsx | 60 | ||||
| -rw-r--r-- | client/src/components/Gender/Gender.module.css | 3 |
2 files changed, 63 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 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 |