Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 2172 Rev 3719
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useState } from 'react';
2 
import { Backdrop, Box, styled } from '@mui/material'
 2 
import { Backdrop, Box, styled } from '@mui/material';
3 
import { renderContent } from '@app/pages/posts/PostViewPage'
 3 
import { renderContent } from '@app/pages/posts/PostViewPage';
4 
 
 4 
 
5 
import Button from '../UI/buttons/Buttons'
 5 
import Button from '../UI/buttons/Buttons';
6 
 
 6 
 
7 
const StyledButton = styled(Button)`
 7 
const StyledButton = styled(Button)`
8 
  width: fit-content;
 8 
  width: fit-content;
9 
`
 9 
`;
10 
 
 10 
 
11 
const PostFile = ({ file, type }) => {
 11 
const PostFile = ({ file, type }) => {
12 
  const [open, setOpen] = useState(false)
 12 
  const [open, setOpen] = useState(false);
13 
 
 13 
 
14 
  const handleOpen = () => setOpen(true)
 14 
  const handleOpen = () => setOpen(true);
15 
  const handleClose = () => setOpen(false)
 15 
  const handleClose = () => setOpen(false);
16 
 
 16 
 
17 
  return (
 17 
  return (
18 
    <>
 18 
    <>
19 
      <StyledButton onClick={handleOpen}>Ver archivo adjunto</StyledButton>
 19 
      <StyledButton onClick={handleOpen}>Ver archivo adjunto</StyledButton>
20 
      <Backdrop
 20 
      <Backdrop
21 
        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
 21 
        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
22 
        open={open}
 22 
        open={open}
23 
        onClick={handleClose}
 23 
        onClick={handleClose}
24 
      >
 24 
      >
25 
        <Box
 25 
        <Box
26 
          sx={{
 26 
          sx={{
27 
            top: '50%',
 27 
            top: '50%',
28 
            left: '50%',
 28 
            left: '50%',
29 
            transform: 'translate(-50%, -50%)',
 29 
            transform: 'translate(-50%, -50%)',
30 
            maxWidth: { xs: '80vw', md: '800px' },
 30 
            maxWidth: { xs: '80vw', md: '800px' },
31 
            height: 'fit-content',
 31 
            height: 'fit-content',
32 
            position: 'absolute',
 32 
            position: 'absolute',
33 
            '& img, & video': {
 33 
            '& img, & video': {
34 
              maxWidth: '100%',
 34 
              maxWidth: '100%',
35 
              height: 'auto'
 35 
              height: 'auto'
36 
            }
 36 
            }
37 
          }}
 37 
          }}
38 
        >
 38 
        >
39 
          {open ? renderContent({ file, type }) : null}
 39 
          {open ? renderContent({ file, type }) : null}
40 
        </Box>
 40 
        </Box>
41 
      </Backdrop>
 41 
      </Backdrop>
42 
    </>
 42 
    </>
43 
  )
 43 
  );
44 
}
 44 
};
45 
 
 45 
 
46 
export default PostFile
 46 
export default PostFile;