btrc-hub/frontend/src/components/ErrorScreen.tsx

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 }


export default (({ status }: Props) => {
  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>)
}) satisfies FC<Props>