Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3685 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3682 stevensc 1 
import React, { useState } from 'react'
2 
import { Button, Typography } from '@mui/material'
3 
import { East } from '@mui/icons-material'
4 
import parse from 'html-react-parser'
5 
 
6 
import Widget from '../UI/Widget'
7 
import Modal from 'components/UI/modal/Modal'
8 
 
9 
const AboutGroup = (group) => {
10 
  const [showModal, setShowModal] = useState(false)
11 
 
12 
  const toggleModal = () => setShowModal(true)
13 
 
14 
  return (
15 
    <>
16 
      <Widget>
17 
        <Widget.Header title='Acerca de este grupo' />
18 
        <Widget.Body>
19 
          <Typography>{parse(group.overview ?? 'Sin descripción')}</Typography>
20 
        </Widget.Body>
21 
        <Widget.Actions styles={{ padding: 0 }}>
22 
          <Button onClick={toggleModal} fullWidth sx={{ borderRadius: 0 }}>
23 
            Ver más
24 
            <East />
25 
          </Button>
26 
        </Widget.Actions>
27 
      </Widget>
28 
      <AboutGroup.Modal
29 
        show={showModal}
30 
        closeModal={() => setShowModal(false)}
31 
        group={group}
32 
      />
33 
    </>
34 
  )
35 
}
36 
 
37 
const AboutModal = ({ show, closeModal, group }) => {
38 
  const {
39 
    name,
40 
    overview,
41 
    group_type,
42 
    industry,
43 
    privacy,
44 
    accessibility,
45 
    website
46 
  } = group
47 
 
48 
  return (
49 
    <Modal
50 
      title='Acerca de este grupo'
51 
      show={show}
52 
      onClose={closeModal}
53 
      showFooter={false}
54 
    >
55 
      <div className='description__label'>
56 
        <label htmlFor='name'>Nombre</label>
57 
        <p>{name}</p>
58 
      </div>
59 
      <div className='description__label'>
60 
        <label htmlFor='name'>Descripción</label>
61 
        {overview && parse(overview)}
62 
      </div>
63 
      <div className='description__label'>
64 
        <label htmlFor='name'>Tipo de grupo</label>
65 
        <p>{group_type}</p>
66 
      </div>
67 
      <div className='description__label'>
68 
        <label htmlFor='name'>Industria</label>
69 
        <p>{industry}</p>
70 
      </div>
71 
      <div className='description__label'>
72 
        <label htmlFor='name'>Privacidad</label>
73 
        <p>{privacy}</p>
74 
      </div>
75 
      <div className='description__label'>
76 
        <label htmlFor='name'>Accesibilidad</label>
77 
        <p>{accessibility}</p>
78 
      </div>
79 
      <div className='description__label'>
80 
        <label htmlFor='name'>Sitio web</label>
81 
        <a href={website} target='_blank' rel='noreferrer'>
82 
          <p>{website}</p>
83 
        </a>
84 
      </div>
85 
    </Modal>
86 
  )
87 
}
88 
 
89 
AboutGroup.Modal = AboutModal
90 
 
91 
export default AboutGroup