Proyectos de Subversion LeadersLinked - Antes de SPA

/* 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 AboutCompany = (companyInfo) => {
    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 esta empresa</h3>
                </div>
                {companyInfo.overview
                    ? parse(companyInfo.overview)
                    : <p>Sin descripción</p>
                }
                <a className="load__suggest" onClick={(e) => openModal(e)}>
                    <span>Ver más</span>
                    <EastIcon />
                </a>
            </div >
            <AboutCompany.Modal show={showModal} closeModal={() => setShowModal(false)} companyInfo={companyInfo} />
        </>
    )
}

const AboutModal = ({ show, closeModal, companyInfo }) => {
    const {
        companyName,
        companySize,
        facebook,
        foundationYear,
        industry,
        instagram,
        locations,
        overview,
        twitter,
        website,
    } = companyInfo
    return (
        <Modal
            show={show}
            onHide={closeModal}
        >
            <Modal.Header closeButton>
                <h2>Acerca de esta empresa</h2>
            </Modal.Header>
            <Modal.Body>
                <div className="description__label">
                    <label htmlFor="name">Nombre</label>
                    <p>{companyName}</p>
                </div>
                <div className="description__label">
                    <label htmlFor="name">Descripción</label>
                    {overview && parse(overview)}
                </div>
                <div className="description__label">
                    <label htmlFor="name">Industria</label>
                    <p>{industry}</p>
                </div>
                <div className="description__label">
                    <label htmlFor="name">Año de fundación</label>
                    <p>{foundationYear}</p>
                </div>
                <div className="description__label">
                    <label htmlFor="name">Tamaño de la compañia</label>
                    <p>{companySize}</p>
                </div>
                <div className="description__label">
                    <label htmlFor="name">Facebook</label>
                    <a href={facebook} target="_blank" rel="noreferrer">
                        <p>{facebook}</p>
                    </a>
                </div>
                <div className="description__label">
                    <label htmlFor="name">Instagram</label>
                    <a href={instagram} target="_blank" rel="noreferrer">
                        <p>{instagram}</p>
                    </a>
                </div>
                <div className="description__label">
                    <label htmlFor="name">Twitter</label>
                    <a href={twitter} target="_blank" rel="noreferrer">
                        <p>{twitter}</p>
                    </a>
                </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>
    )
}

AboutCompany.Modal = AboutModal

export default AboutCompany