added mui

1 files changed, 24 insertions, 11 deletions

diff --git a/admin/src/components/Accordion/Accordion.jsx b/admin/src/components/Accordion/Accordion.jsx
index 9df7fa1..62663a6 100644
--- a/admin/src/components/Accordion/Accordion.jsx
+++ b/admin/src/components/Accordion/Accordion.jsx
@@ -1,4 +1,5 @@
 import React, {useState} from 'react';
+import {Button} from '@mui/material';
 
 import styles from './Accordion.module.css';
 
@@ -16,17 +17,29 @@ const Accordion = ({name, user}) => {
       </div>
       {isActive && (
         <div className={styles.accordion__content}>
-          <div>Indian Resident : {user.indianResident ? 'Yes' : 'No'}</div>
-          <div>Name : {user.name}</div>
-          <div>Gender : {user.gender}</div>
-          <div>Date of Birth : {user.dob}</div>
-          <div>Mobile Number : {user.mobile}</div>
-          <div>Email : {user.email}</div>
-          <div>Address : {user.address.houseNo},{user.address.street},{user.address.locality},{user.address.landmark},{user.address.village},{user.address.district.name},{user.address.state.name},{user.address.pincode}</div>
-          <img src={`${user.photo}`} />
-          <img src={`${user.documents.POI}`} />
-          <img src={`${user.documents.POA}`} />
-          <img src={`${user.documents.DOB}`} />
+          <div className={styles.accordion__demographic}>
+            <div>Name : {user.name}</div>
+            <div>Gender : {user.gender}</div>
+            <div>Date of Birth : {user.dob}</div>
+            <div>Mobile Number : {user.mobile}</div>
+            <div>Email : {user.email}</div>
+            <div>
+              Address : {user.address.houseNo},{user.address.street},
+              {user.address.locality},{user.address.landmark},
+              {user.address.village},{user.address.district.name},
+              {user.address.state.name},{user.address.pincode}
+            </div>
+            <div>Indian Resident : {user.indianResident ? 'Yes' : 'No'}</div>
+          </div>
+          <div className={styles.accordion__biometric}>
+            <img src={user.photo} alt='' />
+            <Button variant='contained'>Documents</Button>
+            <Button variant='contained'>Biometric</Button>
+          </div>
+
+          <img src={user.documents.POI} alt='' />
+          <img src={user.documents.POA} alt='' />
+          <img src={user.documents.DOB} alt='' />
         </div>
       )}
     </div>