Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3718 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3718 Rev 3719
Línea 1... Línea 1...
1 
import React from 'react';
 1 
import React from 'react';
2 
import { Box, Button, Modal, Typography, IconButton } from '@mui/material';
 2 
import { Box, Button, Modal, Typography, IconButton } from '@mui/material';
3 
import Close from '@mui/icons-material/Close';
 3 
import Close from '@mui/icons-material/Close';
4 
 
 4 
 
5 
import { useAlertModal } from '@shared/hooks';
 5 
import { useAlertModal } from '@shared/hooks';
6 
 
 6 
 
7 
import { Card, CardActions, CardContent, CardHeader } from './card';
 7 
import { Card, CardActions, CardContent, CardHeader } from './card';
8 
 
 8 
 
9 
export function AlertModal() {
 9 
export function AlertModal() {
10 
  const { show, title, message, closeAlert, onConfirm, onCancel } = useAlertModal();
 10 
  const { show, title, message, closeAlert, onConfirm, onCancel } = useAlertModal();
11 
 
 11 
 
12 
  return (
 12 
  return (
13 
    <Modal open={show} onClose={closeAlert}>
 13 
    <Modal open={show} onClose={closeAlert}>
14 
      <Box
 14 
      <Box
15 
        sx={{
 15 
        sx={{
16 
          position: 'fixed',
 16 
          position: 'fixed',
17 
          top: '50%',
 17 
          top: '50%',
18 
          left: '50%',
 18 
          left: '50%',
19 
          transform: 'translate(-50%, -50%)',
 19 
          transform: 'translate(-50%, -50%)',
20 
          display: 'flex',
 20 
          display: 'flex',
21 
          justifyContent: 'center',
 21 
          justifyContent: 'center',
22 
          alignItems: 'center',
 22 
          alignItems: 'center',
23 
          width: '100%',
 23 
          width: '100%',
24 
          height: '100%'
 24 
          height: '100%'
25 
        }}
 25 
        }}
26 
      >
 26 
      >
27 
        <Card styles={{ width: '100%', maxWidth: { xs: '90vw', md: '500px', lg: '800px' } }}>
 27 
        <Card styles={{ width: '100%', maxWidth: { xs: '90vw', md: '500px', lg: '800px' } }}>
28 
          <CardHeader
 28 
          <CardHeader
29 
            title={title}
 29 
            title={title}
30 
            renderAction={() => (
 30 
            renderAction={() => (
31 
              <IconButton onClick={closeAlert}>
 31 
              <IconButton onClick={closeAlert}>
32 
                <Close />
 32 
                <Close />
33 
              </IconButton>
 33 
              </IconButton>
34 
            )}
 34 
            )}
35 
          />
 35 
          />
36 
          <CardContent>
 36 
          <CardContent>
37 
            <Typography variant='h2'>{message}</Typography>
 37 
            <Typography variant='h2'>{message}</Typography>
38 
          </CardContent>
 38 
          </CardContent>
39 
 
 39 
 
40 
          <CardActions>
 40 
          <CardActions>
41 
            <Button variant='contained' color='primary' onClick={onConfirm}>
 41 
            <Button variant='contained' color='primary' onClick={onConfirm}>
42 
              Confirmar
 42 
              Confirmar
43 
            </Button>
 43 
            </Button>
44 
            <Button variant='contained' color='primary' onClick={onCancel}>
 44 
            <Button variant='contained' color='primary' onClick={onCancel}>
45 
              Cancelar
 45 
              Cancelar
46 
            </Button>
 46 
            </Button>
47 
          </CardActions>
 47 
          </CardActions>
48 
        </Card>
 48 
        </Card>
49 
      </Box>
 49 
      </Box>
50 
    </Modal>
 50 
    </Modal>
51 
  );
 51 
  );
52 
}
 52 
}