Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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