Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3668 | 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';
3694 stevensc 2 
import Clear from '@mui/icons-material/Clear';
3 
import Delete from '@mui/icons-material/Delete';
4 
import Done from '@mui/icons-material/Done';
3668 stevensc 5 
import { Link } from 'react-router-dom';
6 
import { Avatar, IconButton, styled } from '@mui/material';
5 stevensc 7 
 
3668 stevensc 8 
import Modal from 'components/UI/modal/Modal';
9 
import colors from '@styles/config/colors';
1220 stevensc 10 
 
3668 stevensc 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 
}));
1220 stevensc 20 
 
3668 stevensc 21 
const StyledMemberInfo = styled('div')(() => ({
22 
  display: 'flex',
23 
  alignItems: 'center',
24 
  gap: '0.5rem'
25 
}));
1220 stevensc 26 
 
3668 stevensc 27 
const StyledMemberImage = styled(Avatar)(() => ({
28 
  width: 40,
29 
  height: 40
30 
}));
1220 stevensc 31 
 
5 stevensc 32 
const MembersModal = ({
33 
  isShow = false,
34 
  members = [],
35 
  handleClose = function () {},
1220 stevensc 36 
  handleAction = function () {}
5 stevensc 37 
}) => {
38 
  return (
1330 stevensc 39 
    <Modal
40 
      title='Miembros'
41 
      show={isShow}
42 
      onClose={handleClose}
43 
      onReject={handleClose}
44 
      showFooter={false}
45 
    >
1220 stevensc 46 
      {members.map((member) => (
47 
        <Member key={member.id} member={member} handleAction={handleAction} />
48 
      ))}
5 stevensc 49 
    </Modal>
3668 stevensc 50 
  );
51 
};
5 stevensc 52 
 
1220 stevensc 53 
const Member = ({ member = {}, handleAction = function () {} }) => {
3668 stevensc 54 
  const { name = '', image = '', profile = '', actions = {} } = member;
1220 stevensc 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 && (
3668 stevensc 67 
        <IconButton onClick={() => handleAction(actions.link_approve)} title='Aprobar'>
1220 stevensc 68 
          <Done />
69 
        </IconButton>
70 
      )}
71 
      {actions?.link_reject && (
3668 stevensc 72 
        <IconButton onClick={() => handleAction(actions.link_reject)} title='Rechazar'>
1220 stevensc 73 
          <Clear />
74 
        </IconButton>
75 
      )}
76 
      {actions?.link_cancel && (
3668 stevensc 77 
        <IconButton onClick={() => handleAction(actions.link_cancel)} title='Cancelar'>
1220 stevensc 78 
          <Delete />
79 
        </IconButton>
80 
      )}
81 
    </StyledMemberContainer>
3668 stevensc 82 
  );
83 
};
1220 stevensc 84 
 
3668 stevensc 85 
export default MembersModal;