I need help displaying an image based on the screen size using MUI breakpoints. I'm struggling to understand how to implement this with MUI. Can someone assist me with the breakpoints?
interface EmptyStateProps {
title: string;
description: string;
handleOnClick: () => void;
buttonText: string;
picture: string;
}
export const EmptyState = ({ title, description, handleOnClick, buttonText }: EmptyStateProps): ReactElement =>{
const { buyingTheme } = useBuyingTheme();
const isDark = buyingTheme.palette.mode === 'dark';
return (
<ThemeProvider theme={buyingTheme}>
<Box display='flex' width='100%' justifyContent='center' alignItems='center'>
<Box display='flex' sx={{ height:'445px', width:'445px', border: '1px solid red' }}>
<Box
height='306px'
width='333px'
sx={{
paddingTop: '70px',
paddingBottom: '70px',
paddingRight: '70px',
paddingLeft: '47px',
backgroundImage: `url(${isDark ? './picture.png' : './pictureLight.png' })`,
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundSize: 'contain', //like obect-fit
}}
/>
</Box>
<Box display='flex' flexDirection='column' alignItems='left' sx={{ height:'136px', width:'445px', border: '1px solid blue', marginLeft: '20px' }}>
<Typography variant="headings.h3" sx={{ height:'24px', paddingTop:'4px', paddingBottom:'4px' }}>{title}</Typography>
<Typography
variant="body.default"
color="text.secondary"
sx={{
whiteSpace: 'pre-line',
wordWrap: 'break-word',
marginTop: '4px', height:'48px',
paddingBottom:'4px', marginBottom: '4px',
}}
>
{description}
</Typography>
<Button
sx={{ height: '40px', width: '93px', padding:'20px', marginTop: 'auto' }}
onClick={handleOnClick}
>
{buttonText}
</Button>
</Box>
</Box>
</ThemeProvider>
);
}
;I am trying to render different images based on two screen sizes:
Image 1 - Height: 306px, Width: 333px Screen Size: Width:1920px, Height: 1080px
Image 2 - Height: 285px, Width: 285px Screen Size: Width:1280px, Height: 832px
How can I dynamically switch between these images based on the screen sizes?