-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
122 lines (109 loc) · 3.94 KB
/
App.tsx
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import React, { Component } from "react";
import styled, { createGlobalStyle } from "styled-components";
import { Moorage } from "./reactComponentLib";
interface ItemProps {
item: {
imageSrc: string,
},
};
const GlobalStyles = createGlobalStyle`
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'Roboto', sans-serif;
color: #000000;
background-color: #FFFFFF;
font-size: 1.2rem;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
`;
const Image = styled.img`
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
overflow: hidden;
border-radius: 4px;
filter: brightness(0.95);
`;
const Item: React.FC<ItemProps> = ({ item: { imageSrc } }) => (
<Image src={imageSrc} />
)
const items = [
{ imageSrc: '001.webp', width: 600, height: 450 },
{ imageSrc: '002.webp', width: 600, height: 800 },
{ imageSrc: '003.webp', width: 600, height: 400 },
{ imageSrc: '004.webp', width: 600, height: 500 },
{ imageSrc: '005.webp', width: 600, height: 450 },
{ imageSrc: '006.webp', width: 600, height: 800 },
{ imageSrc: '007.webp', width: 600, height: 424 },
{ imageSrc: '008.webp', width: 600, height: 547 },
{ imageSrc: '009.webp', width: 600, height: 450 },
{ imageSrc: '010.webp', width: 600, height: 450 },
{ imageSrc: '011.webp', width: 600, height: 450 },
{ imageSrc: '012.webp', width: 600, height: 450 },
{ imageSrc: '001.webp', width: 600, height: 450 },
{ imageSrc: '002.webp', width: 600, height: 800 },
{ imageSrc: '003.webp', width: 600, height: 400 },
{ imageSrc: '004.webp', width: 600, height: 500 },
{ imageSrc: '005.webp', width: 600, height: 450 },
{ imageSrc: '006.webp', width: 600, height: 800 },
{ imageSrc: '007.webp', width: 600, height: 424 },
{ imageSrc: '008.webp', width: 600, height: 547 },
{ imageSrc: '009.webp', width: 600, height: 450 },
{ imageSrc: '010.webp', width: 600, height: 450 },
{ imageSrc: '011.webp', width: 600, height: 450 },
{ imageSrc: '012.webp', width: 600, height: 450 },
{ imageSrc: '001.webp', width: 600, height: 450 },
{ imageSrc: '002.webp', width: 600, height: 800 },
{ imageSrc: '003.webp', width: 600, height: 400 },
{ imageSrc: '004.webp', width: 600, height: 500 },
{ imageSrc: '005.webp', width: 600, height: 450 },
{ imageSrc: '006.webp', width: 600, height: 800 },
{ imageSrc: '007.webp', width: 600, height: 424 },
{ imageSrc: '008.webp', width: 600, height: 547 },
{ imageSrc: '009.webp', width: 600, height: 450 },
{ imageSrc: '010.webp', width: 600, height: 450 },
{ imageSrc: '011.webp', width: 600, height: 450 },
{ imageSrc: '012.webp', width: 600, height: 450 },
{ imageSrc: '001.webp', width: 600, height: 450 },
{ imageSrc: '002.webp', width: 600, height: 800 },
{ imageSrc: '003.webp', width: 600, height: 400 },
{ imageSrc: '004.webp', width: 600, height: 500 },
{ imageSrc: '005.webp', width: 600, height: 450 },
{ imageSrc: '006.webp', width: 600, height: 800 },
{ imageSrc: '007.webp', width: 600, height: 424 },
{ imageSrc: '008.webp', width: 600, height: 547 },
{ imageSrc: '009.webp', width: 600, height: 450 },
{ imageSrc: '010.webp', width: 600, height: 450 },
{ imageSrc: '011.webp', width: 600, height: 450 },
{ imageSrc: '012.webp', width: 600, height: 450 },
]
const itemsRatios = items.map(i => i.width / i.height);
class App extends Component {
render() {
const windowWidth = window.innerWidth;
const nrOfColumns = windowWidth < 600 ? 2 : windowWidth < 900 ? 3 : 4;
const gutter = 0.1 / nrOfColumns;
return (
<div>
<GlobalStyles />
<Moorage gutter={gutter} itemComponent={Item} items={items} itemsRatios={itemsRatios} nrOfColumns={nrOfColumns} />
</div>
);
}
}
export default App;