65 行
2.3 KiB
TypeScript
65 行
2.3 KiB
TypeScript
import nikumaru from '@/assets/fonts/nikumaru.otf'
|
|
import errorImg from '@/assets/images/not-found.gif'
|
|
import MainArea from '@/components/layout/MainArea'
|
|
import PageHead from '@/components/common/PageHead'
|
|
import { useUITranslation } from '@/lib/useUITranslation'
|
|
import { currentRenderContext } from '@/lib/renderContext'
|
|
|
|
import type { FC } from 'react'
|
|
|
|
type Props = { status: number }
|
|
|
|
|
|
const ErrorScreen: FC<Props> = ({ status }) => {
|
|
const context = currentRenderContext ()
|
|
if (context != null)
|
|
context.status = status
|
|
const { message: translate, label } = useUITranslation ('errors')
|
|
const [message]: [string, string, string] = (() => {
|
|
switch (status)
|
|
{
|
|
case 403:
|
|
case 404:
|
|
case 500:
|
|
case 503:
|
|
return [translate (`${ status }.message`).text,
|
|
translate (`${ status }.right`).text, translate (`${ status }.left`).text]
|
|
default:
|
|
throw new Error
|
|
}
|
|
}) ()
|
|
|
|
const title = message.replaceAll ('（', ' (').replaceAll ('）', ')')
|
|
|
|
return (
|
|
<MainArea>
|
|
<PageHead title={{ text: title,
|
|
language: translate (`${status}.message`).language }}>
|
|
<meta name="robots" content="noindex"/>
|
|
<style>{`@font-face { font-family: 'Nikumaru';
|
|
src: url(${nikumaru}) format('opentype'); }`}</style>
|
|
</PageHead>
|
|
<div className="text-6xl font-bold text-transparent
|
|
bg-[linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)]
|
|
bg-clip-text bg-[length:200%_100%] animate-rainbow-scroll drop-shadow-[0_0_6px_black]
|
|
space-y-2 sm:space-y-4 md:space-y-6 text-center flex flex-col justify-center items-center"
|
|
style={{ fontFamily: 'Nikumaru' }}>
|
|
<p>{status}</p>
|
|
<div className="flex w-full min-w-0 items-center justify-center
|
|
space-x-1 sm:space-x-2 md:space-x-4">
|
|
<p className="shrink-0" style={{ writingMode: 'vertical-rl' }}>
|
|
{label (`${ status }.left`)}
|
|
</p>
|
|
<img className="aspect-video h-auto min-w-0 max-w-[70vw] object-contain"
|
|
width={640} height={360} src={errorImg} alt={translate ('imageAlt').text}/>
|
|
<p className="shrink-0" style={{ writingMode: 'vertical-rl' }}>
|
|
{label (`${ status }.right`)}
|
|
</p>
|
|
</div>
|
|
<p className="mr-[-.5em]">{label (`${ status }.message`)}</p>
|
|
</div>
|
|
</MainArea>)
|
|
}
|
|
|
|
export default ErrorScreen
|