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;