アイヌ語追加 (#428) (#433)

Reviewed-on: #433
Co-authored-by: miteruzo <miteruzo@naver.com>

frontend/src/components/ErrorScreen.tsx

@@ -1,9 +1,9 @@
-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 PageHead from '@/components/common/PageHead'
+import { useUITranslation } from '@/lib/useUITranslation'
+import { currentRenderContext } from '@/lib/renderContext'
 
 import type { FC } from 'react'
 
@@ -11,17 +11,19 @@ type Props = { status: number }
 
 
 const ErrorScreen: FC<Props> = ({ status }) => {
-  const [message, rightMsg, leftMsg]: [string, string, string] = (() => {
+  const context = currentRenderContext ()
+  if (context != null)
+    context.status = status
+  const { message: translate, label } = useUITranslation ('errors')
+  const [message]: [string, string, string] = (() => {
     switch (status)
     {
     case 403:
-      return ['権限ないよ（笑）', '帰れ！', '帰れ！']
     case 404:
-      return ['ページないよ（笑）', '帰れ！', '帰れ！']
     case 500:
-      return ['鯖でエラー出たって（嘲笑）', '管理人に', '聯絡を！']
     case 503:
-      return ['鯖死んでるよ（泣）', '管理人に', '聯絡を！']
+      return [translate (`${ status }.message`).text,
+	      translate (`${ status }.right`).text, translate (`${ status }.left`).text]
     default:
       throw new Error
     }
@@ -29,35 +31,34 @@ const ErrorScreen: FC<Props> = ({ status }) => {
 
   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>
+	<PageHead title={{ text: title,
+	    language: translate (`${status}.message`).language }}>
 	  <meta name="robots" content="noindex"/>
-	  <title>{title} | {SITE_TITLE}</title>
-	</Helmet>
+	  <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 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 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]">{message}</p>
+	  <p className="mr-[-.5em]">{label (`${ status }.message`)}</p>
 	</div>
       </MainArea>)
 }
 
-export default ErrorScreen
+export default ErrorScreen