Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
6830 stevensc 1 
import React, { useState } from 'react'
2 
import { Modal } from 'react-bootstrap'
3 
import parse from 'html-react-parser'
4 
import EastIcon from '@mui/icons-material/East'
5 
 
6867 stevensc 6 
const AboutGroup = (groupInfo) => {
6830 stevensc 7 
  const [showModal, setShowModal] = useState(false)
8 
 
9 
  const openModal = (e) => {
10 
    e.preventDefault()
11 
    setShowModal(true)
12 
  }
13 
 
14 
  return (
15 
    <>
16 
      <div className="suggest__widget">
17 
        <div className="linked__widget-header">
18 
          <h3>Acerca de este grupo</h3>
19 
        </div>
20 
        {groupInfo.overview ? (
21 
          parse(groupInfo.overview)
22 
        ) : (
23 
          <p>Sin descripción</p>
24 
        )}
25 
        <a className="load__suggest" onClick={(e) => openModal(e)}>
26 
          <span>Ver más</span>
27 
          <EastIcon />
28 
        </a>
29 
      </div>
30 
      <AboutGroup.Modal
31 
        show={showModal}
32 
        closeModal={() => setShowModal(false)}
33 
        groupInfo={groupInfo}
34 
      />
35 
    </>
36 
  )
37 
}
38 
 
39 
const AboutModal = ({ show, closeModal, groupInfo }) => {
40 
  const {
41 
    name,
42 
    overview,
43 
    groupType,
44 
    industry,
45 
    privacy,
46 
    accessibility,
47 
    website,
48 
  } = groupInfo
49 
  return (
50 
    <Modal show={show} onHide={closeModal}>
51 
      <Modal.Header closeButton>
52 
        <h2>Acerca de este grupo</h2>
53 
      </Modal.Header>
54 
      <Modal.Body>
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>{groupType}</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.Body>
86 
    </Modal>
87 
  )
88 
}
89 
 
90 
AboutGroup.Modal = AboutModal
91 
 
92 
export default AboutGroup