interface: indigo Error

This commit is contained in:
Liam Fitzgerald 2020-08-25 11:46:12 +10:00
parent 1150c750cf
commit 17e8add450

View File

@ -1,4 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Text, Box, Col } from '@tlon/indigo-react';
import { RouteComponentProps, withRouter } from 'react-router-dom'; import { RouteComponentProps, withRouter } from 'react-router-dom';
type ErrorProps = RouteComponentProps & { type ErrorProps = RouteComponentProps & {
@ -11,28 +12,30 @@ class ErrorComponent extends Component<ErrorProps> {
render () { render () {
const { code, error, history, description } = this.props; const { code, error, history, description } = this.props;
return ( return (
<div className="pa4 inter tc flex flex-column items-center justify-center w-100 h-100"> <Col alignItems="center" justifyContent="center" height="100%" p={4}>
<h1 className="mb4 fw2 f2" style={{ <Box mb={4}>
fontFeatureSettings: '\'zero\' 1', <Text fontSize={3}>
}}> {code ? code : 'Error'}
{code ? code : 'Error'} </Text>
</h1> </Box>
{description ? <p className="tc mb4">{description}</p> : null} { description && (<Box mb={4}><Text>{description}</Text></Box>) }
{error ? ( {error && (
<div className="mb4"> <Box mb={4}>
<p className="mb4"><code>&ldquo;{error.message}&rdquo;</code></p> <Box mb={2}>
<details> <Text fontFamily="mono"><code>&ldquo;{error.message}&rdquo;</code></Text>
<summary>Stack trace</summary> </Box>
<pre className="tl">{error.stack}</pre> <details>
</details> <summary>Stack trace</summary>
</div> <pre style={{ wordWrap: 'break-word' }} className="tl">{error.stack}</pre>
) : null} </details>
<p className="tc mb4">If this is unexpected, email <code>support@tlon.io</code> or <a className="bb" href="https://github.com/urbit/urbit/issues/new/choose">submit an issue</a>.</p> </Box>
)}
<Text mb={4} textAlign="center">If this is unexpected, email <code>support@tlon.io</code> or <a className="bb" href="https://github.com/urbit/urbit/issues/new/choose">submit an issue</a>.</Text>
{history.length > 1 {history.length > 1
? <button className="bg-light-green green2 pa2 pointer" onClick={() => history.go(-1) }>Go back</button> ? <button className="bg-light-green green2 pa2 pointer" onClick={() => history.go(-1) }>Go back</button>
: <button className="bg-light-green green2 pa2 pointer" onClick={() => history.push('/') }>Go home</button> : <button className="bg-light-green green2 pa2 pointer" onClick={() => history.push('/') }>Go home</button>
} }
</div> </Col>
); );
} }
} }