Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1384 | Rev 3694 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

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