update Error page to properly display in empty layout

resources/js/Pages/Error.vue

@@ -1,13 +1,74 @@
 <template>
-  <div>
-    <h1>{{ title }}</h1>
-    <div>{{ description }}</div>
+  <div class="absolute flex min-h-full min-w-full flex-col bg-white pt-16 pb-12">
+    <main class="mx-auto flex w-full max-w-7xl flex-grow flex-col justify-center px-4 sm:px-6 lg:px-8">
+      <div class="flex flex-shrink-0 justify-center">
+        <a
+          href="/"
+          class="inline-flex"
+        >
+          <span class="sr-only">Seat Plus</span>
+          <img
+            class="h-12 w-auto"
+            src="/img/seat_plus_logo.svg"
+            alt="Seat Plus"
+          >
+        </a>
+      </div>
+      <div class="py-16">
+        <div class="text-center">
+          <p class="text-base font-semibold text-indigo-600">
+            {{ status }}
+          </p>
+          <h1 class="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+            {{ title }}
+          </h1>
+          <p class="mt-2 text-base text-gray-500">
+            {{ description }}
+          </p>
+          <div class="mt-6">
+            <Link
+              :href="route('home')"
+              class="text-base font-medium text-indigo-600 hover:text-indigo-500"
+            >
+              Go back home
+              <span aria-hidden="true"> &rarr;</span>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </main>
+    <footer class="mx-auto w-full max-w-7xl flex-shrink-0 px-4 sm:px-6 lg:px-8">
+      <nav class="flex justify-center space-x-4">
+        <Link
+          href="https://github.com/seatplus/seatplus/issues/new?assignees=&labels=&template=bug_report.md&title="
+          class="text-sm font-medium text-gray-500 hover:text-gray-600"
+        >
+          Contact Support
+        </Link>
+        <span
+          class="inline-block border-l border-gray-300"
+          aria-hidden="true"
+        />
+        <a
+          href="https://discord.gg/sgvp7HMBPX"
+          class="text-sm font-medium text-gray-500 hover:text-gray-600"
+        >Discord</a>
+        <span
+          class="inline-block border-l border-gray-300"
+          aria-hidden="true"
+        />
+      </nav>
+    </footer>
   </div>
 </template>
 
 <script>
+import { Link } from "@inertiajs/inertia-vue3";
+
 export default {
     name: "Error",
+    components: { Link },
+    layout: null,
     props: {
         status: {
             type: Number,
@@ -17,10 +78,10 @@ export default {
     computed: {
         title() {
             return {
-                503: '503: Service Unavailable',
-                500: '500: Server Error',
-                404: '404: Page Not Found',
-                403: '403: Forbidden',
+                503: 'Service Unavailable',
+                500: 'Server Error',
+                404: 'Page Not Found',
+                403: 'Forbidden',
             }[this.status]
         },
         description() {

src/Exception/Handler.php

@@ -28,7 +28,6 @@
 
 use Exception;
 use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
-use Illuminate\Http\Response;
 use Inertia\Inertia;
 use Seatplus\Web\Http\Middleware\HandleInertiaRequests;
 use Throwable;
@@ -75,7 +74,7 @@ public function render($request, Throwable $exception)
         $response = parent::render($request, $exception);
 
         if (! app()->environment('local') && in_array($response->status(), [500, 503, 404, 403])) {
-            return Inertia::render('Error', ['status' => $response->status()])
+            return inertia('Error', ['status' => $response->status()])
                 ->rootView('web::app')
                 ->toResponse($request)
                 ->setStatusCode($response->status());