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;