-
Notifications
You must be signed in to change notification settings - Fork 2.3k
/
index.js
46 lines (40 loc) · 1.14 KB
/
index.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
43
44
45
46
import React from 'react';
import styled, { css } from 'styled-components';
import Feature from './Feature';
import Title from '../Title';
const Container = styled.div`
padding: 1rem 0;
border-right: 1px solid rgba(255, 255, 255, 0.2);
`;
const CenteredHeader = styled.th`
font-size: 1.25rem;
font-weight: 400;
text-align: center;
padding: 1rem 0;
${props => props.supporter && css`background-color: rgba(0, 0, 0, 0.3);`};
`;
export default () => (
<Container>
<Title>Lifted Limits</Title>
<table style={{ borderCollapse: 'collapse' }}>
<thead>
<tr>
<th />
<CenteredHeader>Free</CenteredHeader>
<CenteredHeader supporter>Patron</CenteredHeader>
</tr>
</thead>
<tbody>
<Feature feature="Private Sandboxes" free="No" supporter="Yes" />
<Feature feature="Sandbox Limit" free="50" supporter="Unlimited" />
<Feature feature="Dependency Limit" free="20" supporter="40" />
<Feature
disabled
feature="Static File Hosting"
free="10Mb"
supporter="1Gb"
/>
</tbody>
</table>
</Container>
);