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 '../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