Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';

import { Button, Typography } from '@mui/material';

import { East } from '@mui/icons-material';

import parse from 'html-react-parser';

import Widget from '@components/UI/Widget';

import Modal from '@components/UI/modal/Modal';

const AboutGroup = (group) => {

  const [showModal, setShowModal] = useState(false);

  const toggleModal = () => setShowModal(true);

  return (

    <>

      <Widget>

        <Widget.Header title='Acerca de este grupo' />

        <Widget.Body>

          <Typography>{parse(group.overview ?? 'Sin descripción')}</Typography>

        </Widget.Body>

        <Widget.Actions styles={{ padding: 0 }}>

          <Button onClick={toggleModal} fullWidth sx={{ borderRadius: 0 }}>

            Ver más

            <East />

          </Button>

        </Widget.Actions>

      </Widget>

      <AboutGroup.Modal show={showModal} closeModal={() => setShowModal(false)} group={group} />

    </>

  );

};

const AboutModal = ({ show, closeModal, group }) => {

  const { name, overview, group_type, industry, privacy, accessibility, website } = group;

  return (

    <Modal title='Acerca de este grupo' show={show} onClose={closeModal} showFooter={false}>

      <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>{group_type}</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>

  );

};

AboutGroup.Modal = AboutModal;

export default AboutGroup;