#428

frontend/src/components/ErrorScreen.tsx

@@ -4,6 +4,7 @@ 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 { useUITranslation } from '@/lib/useUITranslation'
 
 import type { FC } from 'react'
 
@@ -11,17 +12,16 @@ type Props = { status: number }
 
 
 const ErrorScreen: FC<Props> = ({ status }) => {
-  const [message, rightMsg, leftMsg]: [string, string, string] = (() => {
+  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
     }
@@ -51,13 +51,13 @@ const ErrorScreen: FC<Props> = ({ status }) => {
 	     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>
+	    <p style={{ writingMode: 'vertical-rl' }}>{label (`${ status }.left`)}</p>
+	    <img className="max-w-[70vw]" src={errorImg} alt={translate ('imageAlt').text}/>
+	    <p 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