From 61ac93c4a9b9aa5cabebda94efc1a9ef0346b659 Mon Sep 17 00:00:00 2001
From: qwerzl <me@qwerzl.me>
Date: Wed, 18 Dec 2024 21:51:24 +0800
Subject: [PATCH] feat: add error page

---
 .changeset/wet-steaks-dream.md |  5 ++++
 error.vue                      | 44 ++++++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+)
 create mode 100644 .changeset/wet-steaks-dream.md
 create mode 100644 error.vue

diff --git a/.changeset/wet-steaks-dream.md b/.changeset/wet-steaks-dream.md
new file mode 100644
index 00000000..09faa6d0
--- /dev/null
+++ b/.changeset/wet-steaks-dream.md
@@ -0,0 +1,5 @@
+---
+"enspire": patch
+---
+
+Add customized error page
diff --git a/error.vue b/error.vue
new file mode 100644
index 00000000..314d5f2e
--- /dev/null
+++ b/error.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+const props = defineProps({
+  error: Object as () => NuxtError,
+})
+
+const handleError = () => reloadNuxtApp({ path: '/' })
+</script>
+
+<template>
+  <div class="min-h-screen flex items-center px-4 py-12 lg:px-12 md:px-8 sm:px-6 xl:px-16">
+    <div class="w-full grid">
+      <div class="col-start-1 row-start-1 w-full flex h-full items-center justify-center">
+        <div class="text-9xl text-foreground font-bold tracking-tighter opacity-10">
+          {{ props.error?.statusCode }}
+        </div>
+      </div>
+      <div class="col-start-1 row-start-1 w-full text-center space-y-6">
+        <div class="space-y-3">
+          <h1 class="text-4xl font-bold tracking-tighter sm:text-5xl">
+            Oops! Lost in Cyberspace
+          </h1>
+          <p class="text-gray-500">
+            Looks like you've ventured into the unknown digital realm. <br>
+            Don't worry, the error is reported and we'll fix it soon.
+          </p>
+        </div>
+        <div class="flex justify-center space-x-2">
+          <Button
+            @click="handleError"
+          >
+            Return to website
+          </Button>
+          <Button as-child variant="outline">
+            <NuxtLink to="https://github.com/Computerization/Enspire/issues">
+              View Ongoing Issues
+            </NuxtLink>
+          </Button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>