Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3694 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
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;