add error page

ui/pages/_error.js

@@ -0,0 +1,143 @@
+import * as React from 'react'
+import styled from 'styled-components'
+import MediaQuery from '../kit/media'
+
+const Overlay = styled.div`
+  opacity: 0.6;
+  pointer-events: none;
+  position: fixed;
+  top: 50px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: -1;
+  background-image: radial-gradient(circle, var(--c-dark), var(--c-dark) 1px, transparent 1px, transparent);
+  background-size: 27px 27px;
+`
+
+const ResponsiveSplitter = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.6;
+  font-size: 1.3em;
+  flex-direction: column;
+
+  ${() => MediaQuery({
+    md: `flex-direction: row; min-height: 100vh; position: relative; top: -50px;`
+  })}
+
+  & > div {
+    margin: 1rem;
+  }
+
+  & section {
+    text-align: center;
+  ${() => MediaQuery({
+    md: `text-align: left;`
+  })}
+  }
+`
+
+const JapaneseFlair = styled.section`
+  color: var(--c-3);
+  font-size: 0.9rem;
+`
+
+const Code = styled.h1`
+  margin: 0;
+  padding: 0;
+  font-size: 4em;
+  ${() => MediaQuery({
+    md: `font-size: 2em;`
+  })}
+`
+
+export default class CustomErrorPage extends React.Component {
+  static getInitialProps ({ res, err }) {
+    const statusCode = res ? res.statusCode : err ? err.statusCode : null
+    return { statusCode }
+  }
+
+  render404 () {
+    return <div>
+      <Overlay />
+      <ResponsiveSplitter>
+        <div>
+          <Code>404</Code>
+        </div>
+        <div>
+          <section>
+            This page is in another castle.
+          </section>
+          <JapaneseFlair>お探しのページは見つかりませんでした</JapaneseFlair>
+        </div>
+      </ResponsiveSplitter>
+    </div>
+  }
+
+  render403 () {
+    return <div>
+      <Overlay />
+      <ResponsiveSplitter>
+        <div>
+          <Code>403</Code>
+        </div>
+        <div>
+          <section>
+            You weren't allowed to access this.
+          </section>
+          <JapaneseFlair>あなたはこの点に合格しないかもしれません</JapaneseFlair>
+        </div>
+      </ResponsiveSplitter>
+    </div>
+  }
+
+  render500 () {
+    return <div>
+      <Overlay />
+      <ResponsiveSplitter>
+        <div>
+          <Code>500</Code>
+        </div>
+        <div>
+          <section>
+            The server doesn't like you right now. Feed it a cookie.
+          </section>
+          <JapaneseFlair>クッキーを送ってください〜  クッキーを送ってください〜</JapaneseFlair>
+        </div>
+      </ResponsiveSplitter>
+    </div>
+  }
+
+  renderDefault () {
+    return <div>
+      <Overlay />
+      <ResponsiveSplitter>
+        <div>
+          <Code>Oops.</Code>
+        </div>
+        <div>
+          <section>
+            Something went bad. How could this happen?
+          </section>
+          <JapaneseFlair>おねがい？</JapaneseFlair>
+        </div>
+      </ResponsiveSplitter>
+    </div>
+  }
+
+  handlers = {
+    403: this.render403,
+    404: this.render404,
+    500: this.render500
+  }
+
+  render () {
+    if (this.props.statusCode in this.handlers) {
+      return this.handlers[this.props.statusCode]()
+    } else {
+      return this.renderDefault()
+    }
+  }
+}

ui/pages/_test/error.js

@@ -0,0 +1,2 @@
+import Error from '../_error'
+export default ({ router: { query: { code = 404 } } }) => <Error statusCode={code} />