| 3719 |
stevensc |
1 |
import React from 'react';
|
|
|
2 |
import Clear from '@mui/icons-material/Clear';
|
|
|
3 |
import Delete from '@mui/icons-material/Delete';
|
|
|
4 |
import Done from '@mui/icons-material/Done';
|
|
|
5 |
import { Link } from 'react-router-dom';
|
|
|
6 |
import { Avatar, IconButton, styled } from '@mui/material';
|
|
|
7 |
|
|
|
8 |
import Modal from '@components/UI/modal/Modal';
|
|
|
9 |
import colors from '@styles/config/colors';
|
|
|
10 |
|
|
|
11 |
const StyledMemberContainer = styled('div')(() => ({
|
|
|
12 |
display: 'flex',
|
|
|
13 |
alignItems: 'center',
|
|
|
14 |
justifyContent: 'space-between',
|
|
|
15 |
gap: '0.5rem',
|
|
|
16 |
padding: '10px 0',
|
|
|
17 |
borderTop: `1px solid ${colors.border.primary}`,
|
|
|
18 |
borderBottom: `1px solid ${colors.border.primary}`
|
|
|
19 |
}));
|
|
|
20 |
|
|
|
21 |
const StyledMemberInfo = styled('div')(() => ({
|
|
|
22 |
display: 'flex',
|
|
|
23 |
alignItems: 'center',
|
|
|
24 |
gap: '0.5rem'
|
|
|
25 |
}));
|
|
|
26 |
|
|
|
27 |
const StyledMemberImage = styled(Avatar)(() => ({
|
|
|
28 |
width: 40,
|
|
|
29 |
height: 40
|
|
|
30 |
}));
|
|
|
31 |
|
|
|
32 |
const MembersModal = ({
|
|
|
33 |
isShow = false,
|
|
|
34 |
members = [],
|
|
|
35 |
handleClose = function () {},
|
|
|
36 |
handleAction = function () {}
|
|
|
37 |
}) => {
|
|
|
38 |
return (
|
|
|
39 |
<Modal
|
|
|
40 |
title='Miembros'
|
|
|
41 |
show={isShow}
|
|
|
42 |
onClose={handleClose}
|
|
|
43 |
onReject={handleClose}
|
|
|
44 |
showFooter={false}
|
|
|
45 |
>
|
|
|
46 |
{members.map((member) => (
|
|
|
47 |
<Member key={member.id} member={member} handleAction={handleAction} />
|
|
|
48 |
))}
|
|
|
49 |
</Modal>
|
|
|
50 |
);
|
|
|
51 |
};
|
|
|
52 |
|
|
|
53 |
const Member = ({ member = {}, handleAction = function () {} }) => {
|
|
|
54 |
const { name = '', image = '', profile = '', actions = {} } = member;
|
|
|
55 |
|
|
|
56 |
return (
|
|
|
57 |
<StyledMemberContainer>
|
|
|
58 |
<StyledMemberInfo>
|
|
|
59 |
<Link to={profile}>
|
|
|
60 |
<StyledMemberImage src={image} alt={`${name} profile image`} />
|
|
|
61 |
</Link>
|
|
|
62 |
|
|
|
63 |
<h4>{name}</h4>
|
|
|
64 |
</StyledMemberInfo>
|
|
|
65 |
|
|
|
66 |
{actions?.link_approve && (
|
|
|
67 |
<IconButton onClick={() => handleAction(actions.link_approve)} title='Aprobar'>
|
|
|
68 |
<Done />
|
|
|
69 |
</IconButton>
|
|
|
70 |
)}
|
|
|
71 |
{actions?.link_reject && (
|
|
|
72 |
<IconButton onClick={() => handleAction(actions.link_reject)} title='Rechazar'>
|
|
|
73 |
<Clear />
|
|
|
74 |
</IconButton>
|
|
|
75 |
)}
|
|
|
76 |
{actions?.link_cancel && (
|
|
|
77 |
<IconButton onClick={() => handleAction(actions.link_cancel)} title='Cancelar'>
|
|
|
78 |
<Delete />
|
|
|
79 |
</IconButton>
|
|
|
80 |
)}
|
|
|
81 |
</StyledMemberContainer>
|
|
|
82 |
);
|
|
|
83 |
};
|
|
|
84 |
|
|
|
85 |
export default MembersModal;
|