feat: add edit profile modal with no action

client/package.json

@@ -17,6 +17,7 @@
     "react": "^18.2.0",
     "react-datepicker": "^4.20.0",
     "react-dom": "^18.2.0",
+    "react-file-base64": "^1.0.3",
     "react-icons": "^4.11.0",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.16.0",

client/src/components/Modal/UpdateTalentModal.tsx

@@ -0,0 +1,114 @@
+import TButton from '../Button/TButton.tsx';
+import { FaEdit } from 'react-icons/fa';
+import { Dispatch, SetStateAction, useState } from 'react';
+import FileBase from 'react-file-base64';
+
+interface Talent {
+  name: string;
+  email: string;
+  hashedPassword: string;
+  jobRole: string;
+  location?: string;
+  hasOffer: boolean;
+  rank: number;
+  socials?: Array<string>;
+  github?: string;
+  linkedin?: string;
+  x?: string;
+  bio?: string;
+  profileImg?: string;
+  createdAt?: Date;
+  updatedAt?: Date;
+}
+
+interface UpdateTalentModalProps {
+  showTalentEditModal: boolean;
+  setShowTalentEditModal: Dispatch<SetStateAction<boolean>>;
+  talent: Talent;
+}
+
+const UpdateTalentModal = ({
+  showTalentEditModal,
+  setShowTalentEditModal,
+  talent,
+}: UpdateTalentModalProps): JSX.Element => {
+  const modalStyle = showTalentEditModal ? 'showModal' : '';
+  const [img, setImg] = useState('');
+
+  const handleSubmit = () => {};
+
+  return (
+    <div className={'Modal ' + modalStyle}>
+      <div className='content'>
+        <div className={'header-11'}>
+          <h1>Add Education</h1>{' '}
+          <TButton value={'X'} onClick={() => setShowTalentEditModal(false)} />
+        </div>
+        <hr />
+        <form onSubmit={handleSubmit}>
+          <div className='form-control'>
+            <label htmlFor='name'>Name</label>
+            <input type='text' name={'name'} defaultValue={talent?.name} />
+          </div>{' '}
+          <div className='form-control'>
+            <label htmlFor='email'>Email</label>
+            <input type='text' name={'email'} defaultValue={talent?.email} />
+          </div>{' '}
+          <div className='form-control'>
+            <label htmlFor='jobRole'>Job Role</label>
+            <input
+              type='text'
+              name={'jobRole'}
+              defaultValue={talent?.jobRole}
+            />
+          </div>
+          <div className='form-control'>
+            <label htmlFor='location'>Location</label>
+            <input
+              type='text'
+              name={'location'}
+              defaultValue={talent?.location}
+            />
+          </div>
+          <div className='form-control'>
+            <label htmlFor='github'>Github Username</label>
+            <input type='text' name={'github'} defaultValue={talent?.github} />
+          </div>
+          <div className='form-control'>
+            <label htmlFor='linkedIn'>LinkedIn Username</label>
+            <input
+              type='text'
+              name={'linkedIn'}
+              defaultValue={talent?.linkedin}
+            />
+          </div>
+          <div className='form-control'>
+            <label htmlFor='city'>X Username</label>
+            <input type='text' name={'x'} defaultValue={talent?.x} />
+          </div>
+          <div className='form-control'>
+            <label htmlFor='profileImg'>Upload your Profile Image</label>
+            <FileBase
+              type='file'
+              multiple={false}
+              onDone={({ base64 }) => setImg(base64)}
+            />
+          </div>
+          <div className='form-control'>
+            <label htmlFor={'bio'}>Bio</label>
+            <textarea name={'bio'} defaultValue={talent.bio} />
+          </div>
+          {/*  add a save button */}
+          <div className='form-control'>
+            <TButton
+              value={(<FaEdit />) as unknown as string}
+              type={'submit'}
+            />
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default UpdateTalentModal;