005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
88 lines
2.4 KiB
JavaScript
88 lines
2.4 KiB
JavaScript
import Box from '@mui/material/Box';
|
|
import ImageList from '@mui/material/ImageList';
|
|
import ImageListItem from '@mui/material/ImageListItem';
|
|
import ImageListItemBar from '@mui/material/ImageListItemBar';
|
|
|
|
export default function TitlebarBelowMasonryImageList() {
|
|
return (
|
|
<Box sx={{ width: 500, height: 450, overflowY: 'scroll' }}>
|
|
<ImageList variant="masonry" cols={3} gap={8}>
|
|
{itemData.map((item) => (
|
|
<ImageListItem key={item.img}>
|
|
<img
|
|
srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
|
|
src={`${item.img}?w=248&fit=crop&auto=format`}
|
|
alt={item.title}
|
|
loading="lazy"
|
|
/>
|
|
<ImageListItemBar position="below" title={item.author} />
|
|
</ImageListItem>
|
|
))}
|
|
</ImageList>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
const itemData = [
|
|
{
|
|
img: 'https://images.unsplash.com/photo-1549388604-817d15aa0110',
|
|
title: 'Bed',
|
|
author: 'swabdesign',
|
|
},
|
|
{
|
|
img: 'https://images.unsplash.com/photo-1525097487452-6278ff080c31',
|
|
title: 'Books',
|
|
author: 'Pavel Nekoranec',
|
|
},
|
|
{
|
|
img: 'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6',
|
|
title: 'Sink',
|
|
author: 'Charles Deluvio',
|
|
},
|
|
{
|
|
img: 'https://images.unsplash.com/photo-1563298723-dcfebaa392e3',
|
|
title: 'Kitchen',
|
|
author: 'Christian Mackie',
|
|
},
|
|
{
|
|
img: 'https://images.unsplash.com/photo-1588436706487-9d55d73a39e3',
|
|
title: 'Blinds',
|
|
author: 'Darren Richardson',
|
|
},
|
|
{
|
|
img: 'https://images.unsplash.com/photo-1574180045827-681f8a1a9622',
|
|
title: 'Chairs',
|
|
author: 'Taylor Simpson',
|
|
},
|
|
{
|
|
img: 'https://images.unsplash.com/photo-1530731141654-5993c3016c77',
|
|
title: 'Laptop',
|
|
author: 'Ben Kolde',
|
|
},
|
|
{
|
|
img: 'https://images.unsplash.com/photo-1481277542470-605612bd2d61',
|
|
title: 'Doors',
|
|
author: 'Philipp Berndt',
|
|
},
|
|
{
|
|
img: 'https://images.unsplash.com/photo-1517487881594-2787fef5ebf7',
|
|
title: 'Coffee',
|
|
author: 'Jen P.',
|
|
},
|
|
{
|
|
img: 'https://images.unsplash.com/photo-1516455207990-7a41ce80f7ee',
|
|
title: 'Storage',
|
|
author: 'Douglas Sheppard',
|
|
},
|
|
{
|
|
img: 'https://images.unsplash.com/photo-1597262975002-c5c3b14bbd62',
|
|
title: 'Candle',
|
|
author: 'Fi Bell',
|
|
},
|
|
{
|
|
img: 'https://images.unsplash.com/photo-1519710164239-da123dc03ef4',
|
|
title: 'Coffee table',
|
|
author: 'Hutomo Abrianto',
|
|
},
|
|
];
|