Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4512 | | 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">
4512 stevensc 19 
                    <h3>Acerca de este grupo</h3>
4504 stevensc 20 
                </div>
4529 stevensc 21 
                {groupInfo.overview
22 
                    ? parse(groupInfo.overview)
23 
                    : <p>Sin descripción</p>
24 
                }
4504 stevensc 25 
                <a className="load__suggest" onClick={(e) => openModal(e)}>
26 
                    <span>Ver más</span>
27 
                    <EastIcon />
28 
                </a>
29 
            </div >
4509 stevensc 30 
            <AboutGroup.Modal show={showModal} closeModal={() => setShowModal(false)} groupInfo={groupInfo} />
4504 stevensc 31 
        </>
4500 stevensc 32 
    )
33 
}
34 
 
4509 stevensc 35 
const AboutModal = ({ show, closeModal, groupInfo }) => {
36 
    const {
37 
        name,
38 
        overview,
39 
        groupType,
40 
        industry,
41 
        privacy,
42 
        accessibility,
43 
        website
44 
    } = groupInfo
4504 stevensc 45 
    return (
46 
        <Modal
47 
            show={show}
48 
            onHide={closeModal}
49 
        >
4510 stevensc 50 
            <Modal.Header closeButton>
51 
                <h2>Acerca de este grupo</h2>
52 
            </Modal.Header>
4509 stevensc 53 
            <Modal.Body>
54 
                <div className="description__label">
55 
                    <label htmlFor="name">Nombre</label>
56 
                    <p>{name}</p>
57 
                </div>
58 
                <div className="description__label">
59 
                    <label htmlFor="name">Descripción</label>
60 
                    {overview && parse(overview)}
61 
                </div>
62 
                <div className="description__label">
63 
                    <label htmlFor="name">Tipo de grupo</label>
64 
                    <p>{groupType}</p>
65 
                </div>
66 
                <div className="description__label">
67 
                    <label htmlFor="name">Industria</label>
68 
                    <p>{industry}</p>
69 
                </div>
70 
                <div className="description__label">
71 
                    <label htmlFor="name">Privacidad</label>
72 
                    <p>{privacy}</p>
73 
                </div>
74 
                <div className="description__label">
75 
                    <label htmlFor="name">Accesibilidad</label>
76 
                    <p>{accessibility}</p>
77 
                </div>
78 
                <div className="description__label">
79 
                    <label htmlFor="name">Sitio web</label>
4511 stevensc 80 
                    <a href={website} target="_blank" rel="noreferrer">
81 
                        <p>{website}</p>
82 
                    </a>
4509 stevensc 83 
                </div>
84 
            </Modal.Body>
4504 stevensc 85 
        </Modal>
86 
    )
87 
}
88 
 
4509 stevensc 89 
AboutGroup.Modal = AboutModal
4504 stevensc 90 
 
4500 stevensc 91 
export default AboutGroup