-
Notifications
You must be signed in to change notification settings - Fork 0
/
Gallery.js
42 lines (37 loc) · 1006 Bytes
/
Gallery.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import React from 'react';
import { Link } from 'react-router-dom';
import Masonry from 'react-masonry-css';
import './gallery.css';
import data from '../../data';
const breakpointColumnsObj = {
default: 4,
1100: 3,
900: 2,
567: 1,
};
const Gallery = () => {
return (
<Masonry
breakpointCols={breakpointColumnsObj}
className='my-masonry-grid'
columnClassName='my-masonry-grid_column'>
{data.map((i) => (
<div key={i.id}>
<Link to={`/${i.id}`}>
<img
src={i.images.thumbnail}
alt={i.name}
style={{ width: '100%', height: '100%', objectFit: 'contain' }}
/>
<div className='bottom-fade'></div>
<div className='art-info'>
<h3 className='white heading-two'>{i.name}</h3>
<p className='white subhead-two'>{i.artist.name}</p>
</div>
</Link>
</div>
))}
</Masonry>
);
};
export default Gallery;