Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
4504 stevensc 1 
/* eslint-disable react/prop-types */
4500 stevensc 2 
import React, { useState } from 'react'
4502 stevensc 3 
import EastIcon from '@mui/icons-material/East';
4500 stevensc 4 
import parse from "html-react-parser";
4509 stevensc 5 
import { Modal } from 'react-bootstrap';
4500 stevensc 6 
 
7 
const AboutGroup = (groupInfo) => {
8 
    const [showModal, setShowModal] = useState(false)
9 
 
10 
    const openModal = (e) => {
11 
        e.preventDefault();
12 
        setShowModal(true)
13 
    }
14 
 
15 
    return (
4504 stevensc 16 
        <>
17 
            <div className='suggest__widget'>
18 
                <div className="linked__widget-header">
19 
                    <h3>About this group</h3>
20 
                </div>
21 
                {groupInfo.overview && parse(groupInfo.overview)}
22 
                <a className="load__suggest" onClick={(e) => openModal(e)}>
23 
                    <span>Ver más</span>
24 
                    <EastIcon />
25 
                </a>
26 
            </div >
4509 stevensc 27 
            <AboutGroup.Modal show={showModal} closeModal={() => setShowModal(false)} groupInfo={groupInfo} />
4504 stevensc 28 
        </>
4500 stevensc 29 
    )
30 
}
31 
 
4509 stevensc 32 
const AboutModal = ({ show, closeModal, groupInfo }) => {
33 
    const {
34 
        name,
35 
        overview,
36 
        groupType,
37 
        industry,
38 
        privacy,
39 
        accessibility,
40 
        website
41 
    } = groupInfo
4504 stevensc 42 
    return (
43 
        <Modal
44 
            show={show}
45 
            onHide={closeModal}
46 
        >
4510 stevensc 47 
            <Modal.Header closeButton>
48 
                <h2>Acerca de este grupo</h2>
49 
            </Modal.Header>
4509 stevensc 50 
            <Modal.Body>
51 
                <div className="description__label">
52 
                    <label htmlFor="name">Nombre</label>
53 
                    <p>{name}</p>
54 
                </div>
55 
                <div className="description__label">
56 
                    <label htmlFor="name">Descripción</label>
57 
                    {overview && parse(overview)}
58 
                </div>
59 
                <div className="description__label">
60 
                    <label htmlFor="name">Tipo de grupo</label>
61 
                    <p>{groupType}</p>
62 
                </div>
63 
                <div className="description__label">
64 
                    <label htmlFor="name">Industria</label>
65 
                    <p>{industry}</p>
66 
                </div>
67 
                <div className="description__label">
68 
                    <label htmlFor="name">Privacidad</label>
69 
                    <p>{privacy}</p>
70 
                </div>
71 
                <div className="description__label">
72 
                    <label htmlFor="name">Accesibilidad</label>
73 
                    <p>{accessibility}</p>
74 
                </div>
75 
                <div className="description__label">
76 
                    <label htmlFor="name">Sitio web</label>
77 
                    <a href={website} target="_blank" rel="noreferrer">{website}</a>
78 
                </div>
79 
            </Modal.Body>
4504 stevensc 80 
        </Modal>
81 
    )
82 
}
83 
 
4509 stevensc 84 
AboutGroup.Modal = AboutModal
4504 stevensc 85 
 
4500 stevensc 86 
export default AboutGroup