-
Notifications
You must be signed in to change notification settings - Fork 3
/
error.vue
55 lines (50 loc) · 1.58 KB
/
error.vue
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
<script lang="ts" setup>
import type { NuxtError } from '#app'
const props = defineProps<{
error: NuxtError
}>()
const sameAs = useSameAs()
const title = props.error.statusCode === 404
? 'Page introuvable'
: 'Erreur'
useSeoMeta({
title,
description: 'Nous sommes désolés mais cette page est introuvable.',
})
</script>
<template>
<Html dir="ltr" class="h-full font-sans antialiased">
<Head>
<SchemaOrgPerson
name="Estéban Soubiran"
logo="/esteban.webp"
:same-as="sameAs"
/>
<Link rel="icon" href="/favicon.ico" type="image/ico" />
</Head>
<Body class="flex h-full flex-col bg-gray-50 dark:bg-black">
<div class="h-full pt-6">
<div class="fixed inset-0 sm:px-8 lg:px-16">
<div
class="w-full h-full max-w-screen-xl mx-auto ring-1 bg-white ring-gray-100 dark:bg-gray-900 dark:ring-gray-300/20"
/>
</div>
<div class="z-50 sticky top-6 flex flex-row justify-center">
<h1 class="text-4xl font-bold">
{{ error.statusCode }}
</h1>
<p class="mt-4 text-lg text-gray-500 dark:text-gray-400">
{{ error.message }}
</p>
<UButton class="mt-12" to="/" color="primary" variant="solid" size="sm" :ui="{ variant: { solid: 'shadow-none text-gray-950' } }">
Retourner à l'accueil
</UButton>
</div>
<main class="relative mt-16 sm:mt-32 text-gray-800 dark:text-gray-100">
<NuxtPage />
</main>
<TheFooter class="relative" />
</div>
</Body>
</Html>
</template>