From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Wed, 20 Apr 2022 10:19:29 -0500
Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Base para front
---
 .../app/components/Counter/CounterWidget.js        | 80 ++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 front/odiparpack/app/components/Counter/CounterWidget.js

(limited to 'front/odiparpack/app/components/Counter/CounterWidget.js')

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);
-- 
cgit v1.2.3