Save

src/components/ErrorMsg.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    v-if="props.error !== undefined"
+    :class='[
+      "fixed","inset-0", "flex", "z-50", "wrap-break-word",
+      "items-center", "justify-center", "text-center",
+      "bg-black/50",
+    ]'
+  >
+    <div :class='[
+      "bg-white", "text-black",
+      "dark:bg-neutral-600", "dark:text-white",
+      "shadow-lg", "w-80",
+      "p-6", "gap-2", "rounded-lg",
+      "flex", "flex-col",
+    ]'>
+      <span class="text-lg font-semibold">問題が発生しました</span>
+      <SmallText v-html='
+        props.error
+          ? (props.error instanceof Error
+            ? props.error.message
+            : String(props.error).replaceAll(/\n/g, "<br>")
+        ) : "不明なエラー"
+      '/>
+      
+      <Button
+        @click="reload"
+        :disabled="isReloading"
+        class="m-auto"
+      >
+        <span v-if="isReloading">再読み込み中...</span>
+        <span v-else>再読み込み</span>
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Button from "@/components/Button.vue";
+import SmallText from "@/components/SmallText.vue";
+import { ref } from "vue";
+
+const props = defineProps<{
+  error?: any;
+}>();
+
+const isReloading = ref<boolean>(false);
+
+const reload = () => {
+  isReloading.value = true;
+  window.location.reload();
+}
+</script>