Proyectos de Subversion LeadersLinked - SPA

import React, { useState, useEffect } from 'react';

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

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

import CoverModal from './CoverModal';

import colors from '@styles/config/colors';

const Cover = ({

  cover: defaultCover = '/images/no_cover.jpg',

  sizes = '',

  uploadUrl = '',

  edit = false

}) => {

  const [cover, setCover] = useState('');

  const [showModal, setShowModal] = useState(false);

  const toggleModal = () => setShowModal(!showModal);

  const onCoverChange = (cover) => setCover(cover);

  useEffect(() => {

    setCover(defaultCover);

  }, [defaultCover]);

  return (

    <>

      <Box

        sx={{

          width: '100%',

          position: 'relative',

          overflow: 'hidden',

          borderBottom: `1px solid ${colors.border.primary}`,

          '& img': {

            width: '100%',

            maxHeight: '300px',

            minHeight: '150px',

            objectFit: 'cover'

          }

        }}

      >

        <img src={cover || defaultCover} alt='Profile cover' />

        {edit && (

          <IconButton

            sx={{

              position: 'absolute',

              top: '20px',

              right: '20px',

              backgroundColor: colors.button.background.primary,

              color: colors.button.text.primary,

              ':hover': {

                backgroundColor: colors.button.background.primary,

                color: colors.button.text.primary,

                opacity: 0.9

              }

            }}

            onClick={toggleModal}

          >

            <Edit />

          </IconButton>

        )}

      </Box>

      <CoverModal

        show={showModal}

        sizes={sizes}

        onClose={toggleModal}

        onChange={onCoverChange}

        url={uploadUrl}

      />

    </>

  );

};

export default Cover;