Añadir plantilla

Base para front

1 files changed, 88 insertions, 0 deletions

diff --git a/front/odiparpack/app/containers/Pages/Maintenance/index.js b/front/odiparpack/app/containers/Pages/Maintenance/index.js
new file mode 100644
index 0000000..8771e51
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Maintenance/index.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Build from '@material-ui/icons/Build';
+import Settings from '@material-ui/icons/SettingsApplications';
+import Warning from '@material-ui/icons/Warning';
+import { Typography, Avatar, Hidden, Paper } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100%'
+  },
+  paper: {
+    margin: 'auto',
+    padding: 40,
+    width: '90%',
+    [theme.breakpoints.up('sm')]: {
+      width: 600,
+      height: 300,
+    },
+    textAlign: 'center'
+  },
+  artwork: {
+    display: 'flex',
+    justifyContent: 'center',
+    marginBottom: 30
+  },
+  icon: {
+    margin: '10px 20px',
+    background: theme.palette.secondary.main,
+    color: theme.palette.common.white,
+    width: 100,
+    height: 100,
+    '& svg': {
+      fontSize: 64,
+    },
+  },
+});
+
+class Maintenance extends React.Component {
+  render() {
+    const title = brand.name + ' - Maintenance';
+    const description = brand.desc;
+    const { classes } = this.props;
+    return (
+      <div className={classes.root}>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <div className={classes.container}>
+          <Paper className={classes.paper}>
+            <div className={classes.artwork}>
+              <Avatar className={classes.icon}><Build /></Avatar>
+              <Hidden xsDown>
+                <Avatar className={classes.icon}><Warning /></Avatar>
+              </Hidden>
+              <Hidden xsDown>
+                <Avatar className={classes.icon}><Settings /></Avatar>
+              </Hidden>
+            </div>
+            <Typography variant="h4" gutterBottom>Website under maintenance</Typography>
+            <Typography variant="subtitle1">
+Our website is under maintenance. We
+              {"'"}
+ll be back shortly
+            </Typography>
+          </Paper>
+        </div>
+      </div>
+    );
+  }
+}
+
+Maintenance.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Maintenance);