Rev 4512 | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
/* eslint-disable react/prop-types */
import React, { useState } from 'react'
import EastIcon from '@mui/icons-material/East';
import parse from "html-react-parser";
import { Modal } from 'react-bootstrap';
const AboutGroup = (groupInfo) => {
const [showModal, setShowModal] = useState(false)
const openModal = (e) => {
e.preventDefault();
setShowModal(true)
}
return (
<>
<div className='suggest__widget'>
<div className="linked__widget-header">
<h3>Acerca de este grupo</h3>
</div>
{groupInfo.overview
? parse(groupInfo.overview)
: <p>Sin descripción</p>
}
<a className="load__suggest" onClick={(e) => openModal(e)}>
<span>Ver más</span>
<EastIcon />
</a>
</div >
<AboutGroup.Modal show={showModal} closeModal={() => setShowModal(false)} groupInfo={groupInfo} />
</>
)
}
const AboutModal = ({ show, closeModal, groupInfo }) => {
const {
name,
overview,
groupType,
industry,
privacy,
accessibility,
website
} = groupInfo
return (
<Modal
show={show}
onHide={closeModal}
>
<Modal.Header closeButton>
<h2>Acerca de este grupo</h2>
</Modal.Header>
<Modal.Body>
<div className="description__label">
<label htmlFor="name">Nombre</label>
<p>{name}</p>
</div>
<div className="description__label">
<label htmlFor="name">Descripción</label>
{overview && parse(overview)}
</div>
<div className="description__label">
<label htmlFor="name">Tipo de grupo</label>
<p>{groupType}</p>
</div>
<div className="description__label">
<label htmlFor="name">Industria</label>
<p>{industry}</p>
</div>
<div className="description__label">
<label htmlFor="name">Privacidad</label>
<p>{privacy}</p>
</div>
<div className="description__label">
<label htmlFor="name">Accesibilidad</label>
<p>{accessibility}</p>
</div>
<div className="description__label">
<label htmlFor="name">Sitio web</label>
<a href={website} target="_blank" rel="noreferrer">
<p>{website}</p>
</a>
</div>
</Modal.Body>
</Modal>
)
}
AboutGroup.Modal = AboutModal
export default AboutGroup