mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
65 lines
1.4 KiB
JavaScript
65 lines
1.4 KiB
JavaScript
import React from 'react'
|
|
import { css, StyleSheet } from 'next/css'
|
|
|
|
export default class Error extends React.Component {
|
|
static getInitialProps ({ res, xhr }) {
|
|
const statusCode = res ? res.statusCode : xhr.status
|
|
return { statusCode }
|
|
}
|
|
|
|
render () {
|
|
const { statusCode } = this.props
|
|
const title = statusCode === 404 ? 'This page could not be found' : 'Internal Server Error'
|
|
|
|
return <div className={css(styles.error, styles['error_' + statusCode])}>
|
|
<div className={css(styles.text)}>
|
|
<h1 className={css(styles.h1)}>{statusCode}</h1>
|
|
<div className={css(styles.desc)}>
|
|
<h2 className={css(styles.h2)}>{title}.</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
error: {
|
|
color: '#000',
|
|
background: '#fff',
|
|
top: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
position: 'absolute',
|
|
fontFamily: '"SF UI Text", "Helvetica Neue", "Lucida Grande"',
|
|
textAlign: 'center',
|
|
paddingTop: '20%'
|
|
},
|
|
|
|
desc: {
|
|
display: 'inline-block',
|
|
textAlign: 'left',
|
|
lineHeight: '49px',
|
|
height: '49px',
|
|
verticalAlign: 'middle'
|
|
},
|
|
|
|
h1: {
|
|
display: 'inline-block',
|
|
borderRight: '1px solid rgba(0, 0, 0,.3)',
|
|
margin: 0,
|
|
marginRight: '20px',
|
|
padding: '10px 23px',
|
|
fontSize: '24px',
|
|
fontWeight: 500,
|
|
verticalAlign: 'top'
|
|
},
|
|
|
|
h2: {
|
|
fontSize: '14px',
|
|
fontWeight: 'normal',
|
|
margin: 0,
|
|
padding: 0
|
|
}
|
|
})
|