1 files changed, 80 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/Counter/CounterWidget.js b/front/odiparpack/app/components/Counter/CounterWidget.js
new file mode 100644
index 0000000..f22bfb8
--- /dev/null
+++ b/front/odiparpack/app/components/Counter/CounterWidget.js
@@ -0,0 +1,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);