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
---
 front/odiparpack/app/components/Error/ErrorWrap.js | 75 ++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 front/odiparpack/app/components/Error/ErrorWrap.js

(limited to 'front/odiparpack/app/components/Error')

diff --git a/front/odiparpack/app/components/Error/ErrorWrap.js b/front/odiparpack/app/components/Error/ErrorWrap.js
new file mode 100644
index 0000000..5b57ab3
--- /dev/null
+++ b/front/odiparpack/app/components/Error/ErrorWrap.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Route, Link } from 'react-router-dom';
+
+import { Typography, Button } from '@material-ui/core';
+
+const styles = theme => ({
+  errorWrap: {
+    background: theme.palette.common.white,
+    boxShadow: theme.shadows[2],
+    borderRadius: '50%',
+    width: 500,
+    height: 500,
+    [theme.breakpoints.down('sm')]: {
+      width: 300,
+      height: 300,
+    },
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    position: 'relative',
+    margin: `${theme.spacing(3)}px auto`,
+  },
+  title: {
+    color: theme.palette.primary.main,
+    textShadow: `10px 6px 50px ${theme.palette.primary.main}`,
+    [theme.breakpoints.down('sm')]: {
+      fontSize: '4rem'
+    },
+  },
+  deco: {
+    boxShadow: theme.shadows[2],
+    position: 'absolute',
+    borderRadius: 2,
+  },
+  button: {
+    marginTop: 50
+  }
+});
+
+const ErrorWrap = (props) => (
+  <Route
+    render={({ staticContext }) => {
+      if (staticContext) {
+        staticContext.status = 404; // eslint-disable-line
+      }
+      const { classes, title, desc } = props;
+      return (
+        <div className={classes.errorWrap}>
+          <Typography className={classes.title} variant="h1">{title}</Typography>
+          <Typography variant="h5">{desc}</Typography>
+          <Button
+            variant="contained"
+            color="primary"
+            className={classes.button}
+            component={Link}
+            to="/app/"
+          >
+            Go To Dashboard
+          </Button>
+        </div>
+      );
+    }}
+  />
+);
+
+ErrorWrap.propTypes = {
+  classes: PropTypes.object.isRequired,
+  desc: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+};
+
+export default withStyles(styles)(ErrorWrap);
-- 
cgit v1.2.3