Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';
import { Backdrop, Box, styled } from '@mui/material';
import { renderContent } from '@app/pages/posts/PostViewPage';

import Button from '../UI/buttons/Buttons';

const StyledButton = styled(Button)`
  width: fit-content;
`;

const PostFile = ({ file, type }) => {
  const [open, setOpen] = useState(false);

  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <>
      <StyledButton onClick={handleOpen}>Ver archivo adjunto</StyledButton>
      <Backdrop
        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
        open={open}
        onClick={handleClose}
      >
        <Box
          sx={{
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            maxWidth: { xs: '80vw', md: '800px' },
            height: 'fit-content',
            position: 'absolute',
            '& img, & video': {
              maxWidth: '100%',
              height: 'auto'
            }
          }}
        >
          {open ? renderContent({ file, type }) : null}
        </Box>
      </Backdrop>
    </>
  );
};

export default PostFile;