update:404ページのレイアウト

Author: hiroto09

app/pages/ErrorBoundaryPage/ErrorPageBase/index.tsx

@@ -6,8 +6,8 @@ interface Props {
 
 export default function ErrorPageBase({ title, message, children }: Props) {
   return (
-    <div data-scrollable="false">
-      <h1>{title}</h1>
+    <div data-scrollable="false" className="flex flex-col items-center justify-center h-full">  
+      <h1 className="text-5xl font-bold">{title}</h1>
       <p>{message}</p>
       {children}
     </div>

app/pages/ErrorBoundaryPage/index.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@/components/ui/button';
 import { isRouteErrorResponse, Link } from '@remix-run/react';
 import ErrorPageBase from './ErrorPageBase';
 
@@ -11,33 +12,43 @@ export default function ErrorBoundaryPage({ error, notFoundItem }: Props) {
     if (error.status === 404) {
       return (
         <ErrorPageBase message={`${notFoundItem}が見つかりませんでした.`} title="404 Not Found">
-          <Link to="/">ホームへ</Link>
+          <Button asChild className="mt-5">
+            <Link to="/">ホームへ</Link>
+          </Button>
         </ErrorPageBase>
       );
     } else if (error.status === 401) {
       return (
         <ErrorPageBase message="認証に失敗しました．" title="401 Unauthorized">
-          <Link to="/login">ログイン</Link>
+          <Button asChild className="mt-5">
+            <Link to="/login">ログイン</Link>
+          </Button>
         </ErrorPageBase>
       );
     } else if (error.status === 500) {
       return (
         <ErrorPageBase message="サーバーでエラーが発生しました．しばらくしてから再度お試しください" title="500 Internal Server Error">
-          <Link to="/">ホームへ</Link>
+          <Button asChild className="mt-5">
+            <Link to="/">ホームへ</Link>
+          </Button>
         </ErrorPageBase>
       );
     } else {
       return (
         <ErrorPageBase message="エラーが発生しました．" title={`${error.status} ${error.statusText}`}>
-          <Link to="/">ホームへ</Link>
+          <Button asChild className="mt-5">
+            <Link to="/">ホームへ</Link>
+          </Button>
         </ErrorPageBase>
       );
     }
   } else if (error instanceof Error) {
     return (
       <div>
         <ErrorPageBase message="エラーが発生しました．" title="システムエラー">
-          <Link to="/">ホームへ</Link>
+          <Button asChild className="mt-5">
+            <Link to="/">ホームへ</Link>
+          </Button>
           <pre>{error.stack}</pre>
         </ErrorPageBase>
       </div>
@@ -46,7 +57,9 @@ export default function ErrorBoundaryPage({ error, notFoundItem }: Props) {
 
   return (
     <ErrorPageBase message="不明なエラーが発生しました．" title="不明なエラー">
-      <Link to="/">ホームへ</Link>
+      <Button asChild className="mt-5">
+        <Link to="/">ホームへ</Link>
+      </Button>
     </ErrorPageBase>
   );
 }