Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

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

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

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

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

export function AlertModal() {

  const { show, title, message, closeAlert, onConfirm, onCancel } = useAlertModal();

  return (

    <Modal open={show} onClose={closeAlert}>

      <Box

        sx={{

          position: 'fixed',

          top: '50%',

          left: '50%',

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

          display: 'flex',

          justifyContent: 'center',

          alignItems: 'center',

          width: '100%',

          height: '100%'

        }}

      >

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

          <CardHeader

            title={title}

            renderAction={() => (

              <IconButton onClick={closeAlert}>

                <Close />

              </IconButton>

            )}

          />

          <CardContent>

            <Typography variant='h2'>{message}</Typography>

          </CardContent>

          <CardActions>

            <Button variant='contained' color='primary' onClick={onConfirm}>

              Confirmar

            </Button>

            <Button variant='contained' color='primary' onClick={onCancel}>

              Cancelar

            </Button>

          </CardActions>

        </Card>

      </Box>

    </Modal>

  );

}