🎨 Add style to error messages (#2020)

Author: KATO-Hiro

src/routes/workbooks/edit/[slug]/+page.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
   import { superForm } from 'sveltekit-superforms/client';
+  import { Heading, Button } from 'svelte-5-ui-lib';
 
+  import HeadingOne from '$lib/components/HeadingOne.svelte';
   import WorkBookForm from '$lib/components/WorkBook/WorkBookForm.svelte';
 
   import type { WorkBookTasksBase } from '$lib/types/workbook';
   import type { Task } from '$lib/types/task.js';
 
   import { FORBIDDEN } from '$lib/constants/http-response-status-codes.js';
+  import { WORKBOOKS_PAGE } from '$lib/constants/navbar-links';
 
   let { data } = $props();
   let canView = $derived(data.status === FORBIDDEN ? false : true);
@@ -38,6 +41,21 @@
   />
 {:else}
   <!-- TODO: コンポーネントとして抽出 -->
-  <h1>{data.status}</h1>
-  <p>{data.message}</p>
+  <div
+    class="container mx-auto md:w-4/5 lg:w-2/3 py-4 md:py-8 px-3 md:px-0 flex flex-col items-center"
+  >
+    <HeadingOne title="エラーが発生しました" />
+
+    <Heading tag="h2" class="text-3xl mb-3 text-gray-900 dark:text-gray-300">
+      {data.status}
+    </Heading>
+
+    <p class="dark:text-gray-300">{data.message}</p>
+
+    <div class="flex justify-center mt-6">
+      <Button href={WORKBOOKS_PAGE} color="primary" class="px-6">
+        {'問題集に戻る'}
+      </Button>
+    </div>
+  </div>
 {/if}