mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
c69686b5fc
The CSS rule on the error page doesn't work and the text on the page isn't rendered in SF UI Text. If we want to use SF on the error page, then, at least in Safari, we can use `-apply-system` as the font family. I also added a fallback to sans-serif, just to be explicit.
65 lines
1.4 KiB
JavaScript
65 lines
1.4 KiB
JavaScript
import React from 'react'
|
|
import style, { merge } 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={merge(styles.error, styles['error_' + statusCode])}>
|
|
<div className={styles.text}>
|
|
<h1 className={styles.h1}>{statusCode}</h1>
|
|
<div className={styles.desc}>
|
|
<h2 className={styles.h2}>{title}.</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
const styles = {
|
|
error: style({
|
|
color: '#000',
|
|
background: '#fff',
|
|
top: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
position: 'absolute',
|
|
fontFamily: '-apple-system, "SF UI Text", "Helvetica Neue", "Lucida Grande", sans-serif',
|
|
textAlign: 'center',
|
|
paddingTop: '20%'
|
|
}),
|
|
|
|
desc: style({
|
|
display: 'inline-block',
|
|
textAlign: 'left',
|
|
lineHeight: '49px',
|
|
height: '49px',
|
|
verticalAlign: 'middle'
|
|
}),
|
|
|
|
h1: style({
|
|
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: style({
|
|
fontSize: '14px',
|
|
fontWeight: 'normal',
|
|
margin: 0,
|
|
padding: 0
|
|
})
|
|
}
|