60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import React, { FC } from 'react';
|
|
import { makeStyles } from '@material-ui/styles';
|
|
import { Paper, Typography, Box, CssBaseline } from "@material-ui/core";
|
|
import WarningIcon from "@material-ui/icons/Warning"
|
|
|
|
const styles = makeStyles(
|
|
{
|
|
siteErrorPage: {
|
|
display: "flex",
|
|
height: "100vh",
|
|
justifyContent: "center",
|
|
flexDirection: "column"
|
|
},
|
|
siteErrorPagePanel: {
|
|
textAlign: "center",
|
|
padding: "280px 0 40px 0",
|
|
backgroundImage: 'url("/app/icon.png")',
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundPosition: "50% 40px",
|
|
backgroundSize: "200px auto",
|
|
width: "100%",
|
|
}
|
|
}
|
|
);
|
|
|
|
interface ApplicationErrorProps {
|
|
error?: string;
|
|
}
|
|
|
|
const ApplicationError: FC<ApplicationErrorProps> = ({ error }) => {
|
|
const classes = styles();
|
|
return (
|
|
<div className={classes.siteErrorPage}>
|
|
<CssBaseline />
|
|
<Paper className={classes.siteErrorPagePanel} elevation={10}>
|
|
<Box display="flex" flexDirection="row" justifyContent="center" alignItems="center" mb={2}>
|
|
<WarningIcon fontSize="large" color="error" />
|
|
<Box ml={2}>
|
|
<Typography variant="h4">
|
|
Application error
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
<Typography variant="subtitle1" gutterBottom>
|
|
Failed to configure the application, please refresh to try again.
|
|
</Typography>
|
|
{error &&
|
|
(
|
|
<Typography variant="subtitle2" gutterBottom>
|
|
Error: {error}
|
|
</Typography>
|
|
)
|
|
}
|
|
</Paper>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ApplicationError;
|