Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'
import { Modal } from 'react-bootstrap'
import parse from 'html-react-parser'
import EastIcon from '@mui/icons-material/East'

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