Hey there! I'm currently working with this component in my app, and right now, the height of the ButtonBase element is fixed. I fetch an image from the backend and use it as a backgroundImage for the ImageImagine component. I want to dynamically adjust the height of the ButtonBase so that the background image in ImageImagine can maintain its original aspect ratio.
import React, { useState } from 'react';
import {
Box,
ButtonBase as MuiButtonBase,
IconButton,
Typography,
styled,
} from '@mui/material';
import Label from './Label';
import Favorite from './Favorite';
import MintingContextButton from './MintingContextButton';
import StatusLabel from 'src/components/StatusLabel';
import PublicLabel from 'src/components/PublicLabel';
import { IMAGINE_STATUS } from 'src/constants';
import { authDomain } from 'src/config';
const ButtonBase = styled(MuiButtonBase)(({ theme }) => ({
position: 'relative',
height: 342,
width: '100%',
borderRadius: 32,
[theme.breakpoints.down('xs')]: {
width: '100% !important', // Overrides inline-style
height: 326,
},
'&:hover': {
'& .imageTitle': {
opacity: 1,
transition: theme.transitions.create('opacity'),
zIndex: 1,
},
'& .imageBackdrop': {
opacity: 0.7,
},
'& .MuiIconButton-favorite': {
opacity: 1,
transition: theme.transitions.create('opacity'),
zIndex: 12,
},
'& .MuiButton-minting': {
opacity: 1,
transition: theme.transitions.create('opacity'),
zIndex: 12,
},
},
}));
const ContextContainer = styled('span')(() => ({
position: 'absolute',
width: '100%', // should be on if a real mint button
height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
padding: 16,
zIndex: 1, // Remove if real mint button
}));
const StyledStatusLabel = styled(StatusLabel)(() => ({
position: 'absolute',
left: 16,
top: 16,
zIndex: 1,
}));
const MintIconButton = styled(IconButton)(() => ({
position: 'absolute',
left: 16,
top: 16,
zIndex: 1,
background: 'rgba(0, 0, 0, 0.7)',
'&:hover': {
background: 'rgba(128, 58, 254, 0.9)',
},
}));
const ImageTitle = styled('span')(({ theme }) => ({
opacity: 0,
textAlign: 'left',
}));
const ImageBackdrop = styled('span')(({ theme }) => ({
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
backgroundColor: theme.palette.common.black,
opacity: 0,
transition: theme.transitions.create('opacity'),
borderRadius: 32,
}));
const ImageImagine = styled('span')(() => ({
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
backgroundSize: 'cover',
backgroundPosition: 'center 40%',
borderRadius: 32,
}));
const GalleryItem = ({
imagine,
imagine: {
id,
title,
status,
isMyFavorite,
public: publicStatus,
context: imgContext,
thumb_url: imgUrl,
count_favorites: countFavorites,
},
onOpen,
onClose,
...props
}) => {
const [isHoverFavorite, setHoverFavorite] = useState(false);
return (
<>
<ButtonBase
className="MuiButtonBase-gallery"
disableRipple
focusRipple
onClick={(event) => onOpen(event, id)}
>
<ContextContainer>
<Box display="flex" justifyContent="space-between">
<Box
display="flex"
visibility={status === IMAGINE_STATUS.COMPLETE && 'hidden'}
>
<StyledStatusLabel status={status} />
</Box>
{status === IMAGINE_STATUS.COMPLETE && (
<React.Fragment>
<Favorite
imagineId={id}
isMyFavorite={isMyFavorite}
isHoverFavorite={isHoverFavorite}
isHidden
onHoverFavorite={setHoverFavorite}
count={countFavorites}
/>
</React.Fragment>
)}
</Box>
<ImageTitle className="imageTitle">
<Typography color="textPrimary" variant="subtitle1" noWrap>
{title}
</Typography>
<Box
display="flex"
justifyContent="space-between"
alignItems="center"
>
{imgContext && <Label>{imgContext}</Label>}
<PublicLabel publicStatus={publicStatus} />
</Box>
</ImageTitle>
</ContextContainer>
<ImageImagine
style={{
backgroundImage: `url(${
imgUrl ?? `${authDomain}/images/glitchcat.gif`
})`,
}}
/>
<ImageBackdrop className="imageBackdrop" />
</ButtonBase>
</>
);
};
export default GalleryItem;