57 lines
1.5 KiB
Vue
57 lines
1.5 KiB
Vue
<script setup>
|
|
import { computed } from 'vue'
|
|
import { Head } from '@inertiajs/vue3'
|
|
import AppLayout from '@/Layouts/AppLayout.vue'
|
|
import AppButton from '@/Components/AppButton.vue'
|
|
import { ExclamationTriangleIcon } from '@heroicons/vue/24/outline'
|
|
|
|
defineOptions({ layout: AppLayout })
|
|
|
|
const props = defineProps({
|
|
status: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const errorMessages = {
|
|
403: {
|
|
title: 'Forbidden',
|
|
description: 'You do not have permission to access this page.',
|
|
},
|
|
404: {
|
|
title: 'Page Not Found',
|
|
description: 'The page you are looking for could not be found.',
|
|
},
|
|
500: {
|
|
title: 'Server Error',
|
|
description: 'Something went wrong on our end. Please try again later.',
|
|
},
|
|
503: {
|
|
title: 'Service Unavailable',
|
|
description: 'We are currently performing maintenance. Please check back soon.',
|
|
},
|
|
}
|
|
|
|
const error = computed(() => errorMessages[props.status] ?? {
|
|
title: 'Error',
|
|
description: 'An unexpected error occurred.',
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Head :title="error.title" />
|
|
|
|
<div class="flex items-center justify-center py-16">
|
|
<div class="text-center max-w-md mx-auto px-4">
|
|
<ExclamationTriangleIcon class="h-16 w-16 text-primary mx-auto mb-6" />
|
|
<p class="text-6xl font-bold text-primary mb-4">{{ status }}</p>
|
|
<h1 class="text-2xl font-bold text-white mb-2">{{ error.title }}</h1>
|
|
<p class="text-gray-400 mb-8">{{ error.description }}</p>
|
|
<AppButton size="lg" href="/">
|
|
Back to Home
|
|
</AppButton>
|
|
</div>
|
|
</div>
|
|
</template>
|