2021-04-18 01:56:23 +02:00
|
|
|
import useTranslation from 'next-translate/useTranslation'
|
|
|
|
import Link from 'next/link'
|
|
|
|
|
|
|
|
export interface ErrorPageProps {
|
|
|
|
statusCode: number
|
|
|
|
message: string
|
|
|
|
}
|
|
|
|
|
2021-05-08 19:52:04 +02:00
|
|
|
export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
|
2021-04-18 01:56:23 +02:00
|
|
|
const { message, statusCode } = props
|
|
|
|
const { t } = useTranslation()
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
2021-05-08 19:52:04 +02:00
|
|
|
<h1 className='my-6 font-semibold text-4xl'>
|
|
|
|
{t('errors:error')}{' '}
|
2021-08-13 15:48:29 +02:00
|
|
|
<span
|
|
|
|
className='text-yellow dark:text-yellow-dark'
|
|
|
|
data-cy='status-code'
|
|
|
|
>
|
|
|
|
{statusCode}
|
|
|
|
</span>
|
2021-04-18 01:56:23 +02:00
|
|
|
</h1>
|
2021-05-08 19:52:04 +02:00
|
|
|
<p className='text-center text-lg'>
|
|
|
|
{message}{' '}
|
|
|
|
<Link href='/'>
|
|
|
|
<a className='text-yellow dark:text-yellow-dark hover:underline'>
|
2021-11-06 17:52:04 +01:00
|
|
|
{t('errors:return-to-home-page')}
|
2021-05-08 19:52:04 +02:00
|
|
|
</a>
|
|
|
|
</Link>
|
2021-04-18 01:56:23 +02:00
|
|
|
</p>
|
|
|
|
|
2021-05-08 19:52:04 +02:00
|
|
|
<style jsx global>
|
|
|
|
{`
|
|
|
|
main {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
min-width: 100vw;
|
|
|
|
flex: 1;
|
|
|
|
}
|
|
|
|
#__next {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
padding-top: 0;
|
|
|
|
height: 100vh;
|
|
|
|
}
|
|
|
|
`}
|
2021-04-18 01:56:23 +02:00
|
|
|
</style>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|