Rev 3290 | Rev 3445 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { lazy, Suspense, useState } from 'react'
import { Badge, IconButton, Avatar as MuiAvatar } from '@mui/material'
import { Edit } from '@mui/icons-material'
import colors from '@styles/colors'
const ImageModal = lazy(() => import('@components/modals/ImageModal'))
export default function Avatar({
src = '',
alt = '',
styles = {},
url = '',
edit = false,
size,
badgeStyles,
...props
}) {
const [showModal, setShowModal] = useState(false)
const [image, setImage] = useState(src)
const toggleModal = () => setShowModal(!showModal)
if (edit) {
return (
<>
<Badge
overlap='circular'
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
sx={badgeStyles}
badgeContent={
<IconButton
sx={{
backgroundColor: colors.button.background.primary,
color: colors.button.text.primary,
':hover': {
backgroundColor: colors.button.background.primary,
color: colors.button.text.primary,
opacity: 0.9
}
}}
color='primary'
onClick={toggleModal}
>
<Edit />
</IconButton>
}
>
<MuiAvatar src={image} alt={alt} sx={styles} {...props} icon />
</Badge>
<Suspense fallback={null}>
<ImageModal
show={showModal}
url={url}
message={`Imágenes recomendadas de ${size ?? '200px'} `}
onClose={toggleModal}
onComplete={(newImage) => setImage(newImage)}
/>
</Suspense>
</>
)
}
return <MuiAvatar src={image} alt={alt} sx={styles} {...props} icon />
}