-
Notifications
You must be signed in to change notification settings - Fork 124
/
stat.js
92 lines (90 loc) · 1.79 KB
/
stat.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
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
import { Flex, Text } from 'theme-ui'
import { isEmpty } from 'lodash'
const Stat = ({
value,
label,
unit = '',
color = 'text',
of,
center = false,
reversed = false,
half = false,
lg = false,
sm = false,
...props
}) => (
<Flex
{...props}
sx={{
fontFamily: 'heading',
flexDirection: reversed ? 'column-reverse' : 'column',
lineHeight: 1,
...props.sx
}}
>
<Flex
sx={{
alignItems: 'center',
justifyContent: center ? 'center' : 'start',
position: 'relative'
}}
>
<Text
as="span"
sx={{
color,
fontSize: lg ? [5, 6, 7] : sm ? [3, 4] : [5, 6],
fontWeight: 'heading',
letterSpacing: 'title',
my: 0
}}
>
{value || '—'}
</Text>
{!isEmpty(unit) && (
<Text
as="sup"
sx={{
fontSize: lg ? [2, 3] : sm ? [1, 1] : [1, 2],
color: color === 'text' ? 'secondary' : color,
ml: [null, unit === '%' ? 1 : null],
mr: [null, 1],
pt: [null, 1]
}}
>
{unit}
</Text>
)}
{!isEmpty(of) && (
<Text
as="sup"
sx={{
fontSize: lg ? [2, 3] : [1, 2],
color: 'muted',
ml: [null, 1],
pt: [null, 1],
'::before': {
content: '"/"'
}
}}
>
{of}
</Text>
)}
</Flex>
{!isEmpty(label) && (
<Text
as="span"
variant="caption"
sx={{
fontSize: lg ? [1, 2, 3] : 1,
letterSpacing: 'headline',
textTransform: 'uppercase'
}}
>
{label}
</Text>
)}
</Flex>
)
export default Stat