1 | import { h } from "preact";
|
2 | import { Head } from './head';
|
3 | const statusCodes = {
|
4 | 400: "Bad Request",
|
5 | 404: "This page could not be found",
|
6 | 405: "Method Not Allowed",
|
7 | 500: "Internal Server Error",
|
8 | };
|
9 | const Error = (props = {}) => {
|
10 | var _a, _b;
|
11 | const { statusCode } = props;
|
12 | const title = (_b = (_a = props.title) !== null && _a !== void 0 ? _a : statusCodes[statusCode]) !== null && _b !== void 0 ? _b : "An unexpected error has occurred";
|
13 | return (h("div", { style: styles.error },
|
14 | h(Head, null,
|
15 | h("title", { "data-microsite-ignore": true },
|
16 | statusCode,
|
17 | ": ",
|
18 | title)),
|
19 | h("div", null,
|
20 | h("style", { dangerouslySetInnerHTML: { __html: "body { margin: 0 }" } }),
|
21 | statusCode ? h("h1", { style: styles.h1 }, statusCode) : null,
|
22 | h("h2", { style: styles.h2 },
|
23 | title,
|
24 | "."))));
|
25 | };
|
26 | const styles = {
|
27 | error: {
|
28 | color: '#000',
|
29 | background: '#fff',
|
30 | fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
|
31 | height: '100vh',
|
32 | textAlign: 'center',
|
33 | display: 'flex',
|
34 | flexDirection: 'column',
|
35 | alignItems: 'center',
|
36 | justifyContent: 'center',
|
37 | },
|
38 | h1: {
|
39 | display: 'block',
|
40 | margin: 0,
|
41 | fontSize: '40px',
|
42 | fontWeight: 600,
|
43 | },
|
44 | h2: {
|
45 | fontSize: '20px',
|
46 | fontWeight: 'normal',
|
47 | lineHeight: 'inherit',
|
48 | margin: 0,
|
49 | marginTop: '0.5em',
|
50 | padding: 0,
|
51 | },
|
52 | };
|
53 | export default Error;
|