Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

import { Box, Modal as MuiModal, IconButton } from '@mui/material';

import Close from '@mui/icons-material/Close';

import { useModal } from '@shared/hooks';

import { Card, CardHeader, CardContent } from './card';

export function Modal() {

  const { show, title, content, closeModal } = useModal();

  return (

    <MuiModal open={show} onClose={closeModal}>

      <Box

        sx={{

          position: 'fixed',

          top: '50%',

          left: '50%',

          transform: 'translate(-50%, -50%)',

          display: 'flex',

          justifyContent: 'center',

          alignItems: 'center',

          width: '100%',

          height: '100%'

        }}

      >

        <Card sx={{ width: '100%', maxWidth: { xs: '90vw', md: '500px' } }}>

          <CardHeader

            title={title}

            renderAction={() => (

              <IconButton onClick={closeModal}>

                <Close />

              </IconButton>

            )}

          />

          <CardContent styles={{ maxHeight: '70vh', overflowY: 'auto' }}>{content}</CardContent>

        </Card>

      </Box>

    </MuiModal>

  );

}