45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import ImageList from '@mui/material/ImageList';
|
|
import ImageListItem from '@mui/material/ImageListItem';
|
|
import structures from "../../data";
|
|
import Box from '@mui/material/Box';
|
|
import Container from '@mui/material/Container';
|
|
import ImageListItemBar from '@mui/material/ImageListItemBar';
|
|
import { Link } from 'react-router-dom';
|
|
const imgData = structures.slice(0, -1);
|
|
|
|
|
|
function Gallery() {
|
|
return (
|
|
<Container maxWidth="lg">
|
|
<Box sx={{ width: 800, height: 585, overflowY: 'scroll', m: '20px auto' }}>
|
|
<ImageList
|
|
variant="masonry"
|
|
sx={{
|
|
columnCount: {
|
|
xs: '1 !important',
|
|
sm: '2 !important',
|
|
md: '3 !important',
|
|
lg: '4 !important',
|
|
},
|
|
}}
|
|
gap={8}>
|
|
{imgData.map((item, index) => (
|
|
<Link key={index} to={"/building/" + index}>
|
|
<ImageListItem key={item.img}>
|
|
<img
|
|
srcSet={item.img}
|
|
src={item.img}
|
|
alt={item.title}
|
|
loading="lazy"
|
|
/>
|
|
<ImageListItemBar position="bottom" title={item.title} />
|
|
</ImageListItem>
|
|
</Link>
|
|
))}
|
|
</ImageList>
|
|
</Box>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
export default Gallery; |