Proyectos de Subversion LeadersLinked - SPA

Rev

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

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