NuxtPapier/error.vue at main · alexanderop/NuxtPapier · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<script setup lang="ts">
const { error } = defineProps<{
  /** The error object containing status and message information */
  error: {
    statusCode: number
    statusMessage?: string
    message?: string
  }
}>()

const handleError = () => clearError({ redirect: '/' })

const errorMessages: Record<number | 'default', {
  title: string
  description: string
  icon: string
  ascii: string
}> = {
  404: {
    ascii: `
       ___
      /   \\
     | 404 |
      \\___/
        |
      __|__
     /     \\
    | O   O |
    |   >   |
    |  ___  |
     \\_____/
    `,
    description: 'This page went on vacation and forgot to leave a forwarding address.',
    icon: 'i-heroicons-map',
    title: 'Oops! Lost in cyberspace',
  },
  500: {
    ascii: `
      ___
     |o o|
     | > |
     |___|
    /|   |\\
   / |   | \\
  /  |___|  \\
    // | \\\\
   //  |  \\\\
    `,
    description: 'Our hamsters stopped running. We\'re getting them back on the wheel!',
    icon: 'i-heroicons-fire',
    title: 'Server needs coffee',
  },
  default: {
    ascii: `
     _____
    |     |
    | ??? |
    |_____|
      | |
     /   \\
    |     |
    |_____|
    `,
    description: 'Even we don\'t know what went wrong. That\'s... concerning.',
    icon: 'i-heroicons-question-mark-circle',
    title: 'Something weird happened',
  },
}

const errorInfo = errorMessages[error.statusCode] || errorMessages.default
</script>

<template>
  <div class="px-4 flex min-h-screen items-center justify-center">
    <div class="text-center max-w-2xl">
      <!-- ASCII Art -->
      <div class="mb-6 flex justify-center">
        <pre class="text-4xl text-[var(--color-gray-600)] leading-none font-mono select-none dark:text-[var(--color-gray-400)]">{{ errorInfo.ascii }}</pre>
      </div>

      <h1 class="text-6xl text-[var(--color-gray-900)] font-bold mb-4 animate-pulse dark:text-[var(--color-gray-100)]">
        {{ error.statusCode }}
      </h1>

      <h2 class="text-2xl text-[var(--color-gray-800)] font-semibold mb-4 dark:text-[var(--color-gray-200)]">
        {{ errorInfo.title }}
      </h2>

      <p class="text-lg text-[var(--color-gray-600)] mb-8 dark:text-[var(--color-gray-400)]">
        {{ errorInfo.description }}
      </p>

      <div class="space-y-4">
        <button
          type="button"
          class="bg-gradient-to-r text-[var(--color-background)] font-medium px-8 py-4 rounded-lg inline-flex transform transition-all duration-200 items-center from-[var(--color-info)] to-[var(--color-alert-note-border)] hover:shadow-lg hover:scale-105"
          @click="handleError"
        >
          <Icon
            name="i-heroicons-rocket-launch"
            class="mr-2 h-5 w-5"
          />
          Beam me home, Scotty!
        </button>

        <div class="text-sm text-[var(--color-gray-500)]">
          <button
            type="button"
            class="underline transition-colors hover:text-[var(--color-gray-700)] dark:hover:text-[var(--color-gray-300)]"
            @click="$router.back()"
          >
            ← Take me back to safety
          </button>
        </div>
      </div>

      <!-- Debug info in development -->
      <div
        v-if="$config.public.nodeEnv === 'development' && error.statusMessage"
        class="mt-8 p-4 text-left rounded-lg bg-[var(--color-gray-100)] dark:bg-[var(--color-gray-800)]"
      >
        <p class="text-xs text-[var(--color-gray-600)] font-mono dark:text-[var(--color-gray-400)]">
          {{ error.statusMessage }}
        </p>
      </div>
    </div>
  </div>
</template>