🎨 Extract component (#2020)

Author: KATO-Hiro

src/lib/components/Messages/ErrorMessageAndReturnButton.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Heading, Button } from 'svelte-5-ui-lib';
+  import HeadingOne from '$lib/components/HeadingOne.svelte';
+
+  interface Props {
+    errorStatus: number | undefined;
+    errorMessage: string | undefined;
+    returnUrl: string;
+    returnButtonLabel: string;
+  }
+
+  let { errorStatus, errorMessage, returnUrl, returnButtonLabel }: Props = $props();
+</script>
+
+<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">
+    {errorStatus}
+  </Heading>
+
+  <p class="dark:text-gray-300">{errorMessage}</p>
+
+  <div class="flex justify-center mt-6">
+    <Button href={returnUrl} color="primary" class="px-6">
+      {returnButtonLabel}
+    </Button>
+  </div>
+</div>

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

@@ -1,9 +1,8 @@
 <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 ErrorMessageAndReturnButton from '$lib/components/Messages/ErrorMessageAndReturnButton.svelte';
 
   import type { WorkBookTasksBase } from '$lib/types/workbook';
   import type { Task } from '$lib/types/task.js';
@@ -40,22 +39,10 @@
     submitButtonLabel="更新"
   />
 {:else}
-  <!-- TODO: コンポーネントとして抽出 -->
-  <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>
+  <ErrorMessageAndReturnButton
+    errorStatus={data.status}
+    errorMessage={data.message}
+    returnUrl={WORKBOOKS_PAGE}
+    returnButtonLabel="問題集に戻る"
+  />
 {/if}