indiemakers/error.vue at main · riderx/indiemakers · 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
<template>
  <div class="container mx-auto">
    <div class="flex flex-wrap py-2">
      <div class="w-full mx-auto border-8 border-white md:w-1/2">
        <img
          :id="logo.title"
          class="w-1/2 mx-auto my-10"
          width="100%"
          height="100%"
          :src="logo.source"
          :alt="logo.title"
          :aria-label="logo.title"
        />
        <h1 class="py-2 pl-2 m-0 text-3xl text-center text-white font-indie">Tu sembles perdu!</h1>
        <p class="px-5 text-white">La page que tu recherche n'est pas disponible. Essaye à nouveau ou utilise le bouton ci-dessous.</p>
        <div class="pt-3 pb-3 pl-4 pr-4 mx-auto text-center text-white md:w-1/2">
          <button
            type="button"
            class="
              px-4
              py-1
              border-4 border-white
              rounded-none
              hover:border-gray-200 hover:text-royalblue-700 hover:bg-gray-200
              text-light
              h1
            "
            @click="goHome()"
          >
            Accueil
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  defineProps({
      error: {
        type: Object,
        required: true,
      },
    });

  const router = useRouter()
  const logo = {
    title: '404 LOGO',
    source: 'https://res.cloudinary.com/forgr/image/upload/v1621019061/indiemakers/404_xivjox.svg',
  }
  const goHome = () => {
    router.push('/')
  }

</script>