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
|
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import CountUp from 'react-countup';
import { withStyles } from '@material-ui/core/styles';
import { Typography, Paper } from '@material-ui/core';
const styles = theme => ({
root: {
flexGrow: 1,
justifyContent: 'space-between',
alignItems: 'flex-start',
padding: 10,
height: 190,
marginBottom: 6,
display: 'flex',
[theme.breakpoints.up('sm')]: {
height: 120,
marginBottom: -1,
alignItems: 'flex-end',
},
[theme.breakpoints.down('xs')]: {
flexDirection: 'column',
},
'& > *': {
padding: '0 5px'
}
},
title: {
color: theme.palette.common.white,
fontSize: 16,
fontWeight: 400
},
counter: {
color: theme.palette.common.white,
fontSize: 28,
fontWeight: 500
},
customContent: {
textAlign: 'right'
}
});
class CounterWidget extends PureComponent {
render() {
const {
classes,
color,
start,
end,
duration,
title,
children
} = this.props;
return (
<Paper className={classes.root} style={{ backgroundColor: color }}>
<div>
<Typography className={classes.counter}>
<CountUp start={start} end={end} duration={duration} useEasing />
</Typography>
<Typography className={classes.title} variant="subtitle1">{title}</Typography>
</div>
<div className={classes.customContent}>
{children}
</div>
</Paper>
);
}
}
CounterWidget.propTypes = {
classes: PropTypes.object.isRequired,
color: PropTypes.string.isRequired,
start: PropTypes.number.isRequired,
end: PropTypes.number.isRequired,
duration: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
children: PropTypes.node.isRequired,
};
export default withStyles(styles)(CounterWidget);
|
