1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/pages/_error.js

67 lines
1.5 KiB
JavaScript
Raw Normal View History

2016-10-09 09:25:38 +00:00
import React from 'react'
import style from 'next/css'
2016-10-09 09:25:38 +00:00
export default class Error extends React.Component {
static getInitialProps ({ res, xhr }) {
const statusCode = res ? res.statusCode : (xhr ? xhr.status : null)
2016-10-09 09:25:38 +00:00
return { statusCode }
}
render () {
const { statusCode } = this.props
const title = statusCode === 404
? 'This page could not be found'
: (statusCode ? 'Internal Server Error' : 'An unexpected error has occurred')
2016-10-09 09:25:38 +00:00
return <div className={styles.error}>
<div className={styles.text}>
{statusCode ? <h1 className={styles.h1}>{statusCode}</h1> : null}
<div className={styles.desc}>
<h2 className={styles.h2}>{title}.</h2>
2016-10-09 09:25:38 +00:00
</div>
</div>
</div>
}
}
const styles = {
error: style({
2016-10-09 09:25:38 +00:00
color: '#000',
background: '#fff',
top: 0,
bottom: 0,
left: 0,
right: 0,
position: 'absolute',
fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
2016-10-09 09:25:38 +00:00
textAlign: 'center',
paddingTop: '20%'
}),
2016-10-09 09:25:38 +00:00
desc: style({
2016-10-09 09:25:38 +00:00
display: 'inline-block',
textAlign: 'left',
lineHeight: '49px',
height: '49px',
verticalAlign: 'middle'
}),
2016-10-09 09:25:38 +00:00
h1: style({
2016-10-09 09:25:38 +00:00
display: 'inline-block',
borderRight: '1px solid rgba(0, 0, 0,.3)',
margin: 0,
marginRight: '20px',
padding: '10px 23px',
fontSize: '24px',
fontWeight: 500,
verticalAlign: 'top'
}),
2016-10-09 09:25:38 +00:00
h2: style({
2016-10-09 09:25:38 +00:00
fontSize: '14px',
fontWeight: 'normal',
margin: 0,
padding: 0
})
}