Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x | import Heading from './Heading'
import EN from '../locales/en'
import FR from '../locales/fr'
import Link from 'next/link'
interface ErrorPageProps {
isAuth: boolean
errType: '404' | '500' | '503'
lang: string
homePageLink: string
accountPageLink: string
}
const ErrorPage = ({
isAuth,
errType,
lang = 'en',
homePageLink = '/',
accountPageLink = '/',
}: ErrorPageProps) => {
let biClassName = ''
const language = lang === 'en' ? [EN] : lang === 'fr' ? [FR] : [EN, FR]
Iif (lang === 'bi') {
biClassName = 'grid gap-10 grid-cols-1 sm:grid-cols-2 sm:gap-6'
}
const errorHeadingEN =
errType === '404'
? EN.errorPageHeadingTitle404
: errType === '500'
? EN.errorPageHeadingTitle500
: EN.errorPageHeadingTitle503
const errorHeadingFR =
errType === '404'
? FR.errorPageHeadingTitle404
: errType === '500'
? FR.errorPageHeadingTitle500
: FR.errorPageHeadingTitle503
const errorTextEN =
errType === '404'
? EN.errorPageErrorText404
: errType === '500'
? EN.errorPageErrorText500
: EN.errorPageErrorText503
const errorTextFR =
errType === '404'
? FR.errorPageErrorText404
: errType === '500'
? FR.errorPageErrorText500
: FR.errorPageErrorText503
return (
<div className={`${biClassName} container`}>
{language.map((val, index) => {
return (
<div key={(val.languageSelection + index).toString()}>
<Heading
id={'pageHead' + index + errType}
title={val === EN ? errorHeadingEN : errorHeadingFR}
/>
<p className="mt-2 pb-6 text-20px text-gray-darker">
{val === EN ? errorTextEN : errorTextFR}
</p>
<p className="text-[20px] font-bold text-gray-darker sm:text-black">
{val.errorPageNextText}
</p>
<h2 className="sr-only">{`What's Next Links`}</h2>
<ul id={'errorTypes' + index + errType}>
<li
key={'errorLink1' + index.toString()}
className={
errType === '404'
? 'hidden'
: 'pl-3 text-20px text-gray-darker'
}
>
{errType === '500'
? val.error500TextLink
: errType === '503'
? val.error503TextLink
: null}
</li>
<li
key={'errorLink2' + index.toString()}
className="pl-3 text-20px text-gray-darker"
>
{!isAuth
? val.errorTextLinkCommon
: val.errorAuthTextLinkCommon}
<Link
className="font-body text-20px text-deep-blue-dark underline hover:text-blue-hover focus:text-blue-hover"
id={
!isAuth
? 'homePage' + errType + lang + index
: 'accountPage' + errType + lang + index
}
href={!isAuth ? homePageLink : accountPageLink}
>
{!isAuth
? val.errorTextLinkCommon_2
: errType === '404'
? val.errorAuthTextLinkCommon_2
: val.errorTextLinkCommon_2}
</Link>
</li>
</ul>
<p
data-testid="errorType"
className="mt-10 pb-2 text-[14px] font-bold text-gray-darker"
>
{val.errorPageType} {errType}
</p>
</div>
)
})}
</div>
)
}
export default ErrorPage
|