Proyectos de Subversion LeadersLinked - SPA

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

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

import { Edit } from '@mui/icons-material'

import CoverModal from './CoverModal'

import colors from '@styles/colors'

const Cover = ({

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

  sizes = '',

  edit = false,

  editUrl = ''

}) => {

  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} 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={editUrl}

      />

    </>

  )

}

export default Cover