50 lines
1.4 KiB
Vue
50 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import { useTitle } from "@vueuse/core";
|
|
|
|
interface Props {
|
|
code?: string;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
code: "500",
|
|
});
|
|
|
|
const { t } = useI18n();
|
|
|
|
const errorKey = computed(() => {
|
|
if (props.code === "404") return "errorPage.notFound";
|
|
if (props.code === "500") return "errorPage.serverError";
|
|
return "errorPage.generic";
|
|
});
|
|
|
|
const title = computed(() => t(`${errorKey.value}.title`));
|
|
const message = computed(() => t(`${errorKey.value}.message`));
|
|
|
|
useTitle(title);
|
|
|
|
const goBack = () => window.history.back();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-base-300 flex items-center justify-center px-4">
|
|
<div class="w-full max-w-xl text-center">
|
|
<i class="mdi mdi-alert-circle-outline text-7xl text-primary"></i>
|
|
<h1 class="text-7xl font-bold mt-4">{{ code }}</h1>
|
|
<h2 class="text-2xl font-semibold mt-2">{{ title }}</h2>
|
|
<p class="text-base-content/70 mt-4">{{ message }}</p>
|
|
<div class="mt-8 flex items-center justify-center gap-4">
|
|
<a href="/" class="btn btn-primary">
|
|
<i class="mdi mdi-home mr-2"></i>
|
|
{{ t("errorPage.goHome") }}
|
|
</a>
|
|
<button @click="goBack" class="btn btn-ghost">
|
|
<i class="mdi mdi-arrow-left mr-2"></i>
|
|
{{ t("errorPage.goBack") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|