41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import ImageList from '@mui/material/ImageList';
|
|
import ImageListItem from '@mui/material/ImageListItem';
|
|
import {realPhotos} from "../../data";
|
|
import Box from '@mui/material/Box';
|
|
import Container from '@mui/material/Container';
|
|
import ImageListItemBar from '@mui/material/ImageListItemBar';
|
|
const imgData = realPhotos.slice(0,3)
|
|
|
|
function Gallery() {
|
|
return (
|
|
<Container maxWidth="lg">
|
|
<Box sx={{ width: {xs:"100%", sm:"90%"}, height: 'min-content', m: '20px auto' } }>
|
|
<ImageList
|
|
variant="masonry"
|
|
sx={{
|
|
columnCount: {
|
|
xs: '1 !important',
|
|
sm: '1 !important',
|
|
md: '3 !important',
|
|
lg: '3 !important',
|
|
},
|
|
}}
|
|
gap={5}>
|
|
{imgData.map((item,index) => (
|
|
<ImageListItem key={item.img} sx={{paddingTop: index%2!=0 ? '0px' : '5px'}}>
|
|
<img
|
|
alt={item.title}
|
|
srcSet={item.img}
|
|
src={item.img}
|
|
loading="lazy"
|
|
/>
|
|
<ImageListItemBar position="bottom" title={ item.title } />
|
|
</ImageListItem>
|
|
))}
|
|
</ImageList>
|
|
</Box>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
export default Gallery; |