63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
import { Helmet } from 'react-helmet-async'
|
||
|
||
import nikumaru from '@/assets/fonts/nikumaru.otf'
|
||
import errorImg from '@/assets/images/not-found.gif'
|
||
import MainArea from '@/components/layout/MainArea'
|
||
import { SITE_TITLE } from '@/config'
|
||
|
||
import type { FC } from 'react'
|
||
|
||
type Props = { status: number }
|
||
|
||
|
||
const ErrorScreen: FC<Props> = ({ status }) => {
|
||
const [message, rightMsg, leftMsg]: [string, string, string] = (() => {
|
||
switch (status)
|
||
{
|
||
case 403:
|
||
return ['権限ないよ（笑）', '帰れ！', '帰れ！']
|
||
case 404:
|
||
return ['ページないよ（笑）', '帰れ！', '帰れ！']
|
||
case 500:
|
||
return ['鯖でエラー出たって（嘲笑）', '管理人に', '聯絡を！']
|
||
case 503:
|
||
return ['鯖死んでるよ（泣）', '管理人に', '聯絡を！']
|
||
default:
|
||
throw new Error
|
||
}
|
||
}) ()
|
||
|
||
const title = message.replaceAll ('（', ' (').replaceAll ('）', ')')
|
||
|
||
const style = document.createElement ('style')
|
||
style.innerHTML = `
|
||
@font-face
|
||
{
|
||
font-family: 'Nikumaru';
|
||
src: url(${ nikumaru }) format('opentype');
|
||
}`
|
||
document.head.appendChild (style)
|
||
|
||
return (
|
||
<MainArea>
|
||
<Helmet>
|
||
<meta name="robots" content="noindex"/>
|
||
<title>{title} | {SITE_TITLE}</title>
|
||
</Helmet>
|
||
<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 flex-row space-x-1 sm:space-x-2 md:space-x-4">
|
||
<p style={{ writingMode: 'vertical-rl' }}>{leftMsg}</p>
|
||
<img className="max-w-[70vw]" src={errorImg} alt="逃げたギター"/>
|
||
<p style={{ writingMode: 'vertical-rl' }}>{rightMsg}</p>
|
||
</div>
|
||
<p className="mr-[-.5em]">{message}</p>
|
||
</div>
|
||
</MainArea>)
|
||
}
|
||
|
||
export default ErrorScreen |