From 145cdd8984c5dec62c91f8008d00e98b94895baa Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Sun, 21 Mar 2021 16:46:33 +0100
Subject: [PATCH] :sparkles: (not found) init not found page

---
 src/assets/icons/alert.svg |  6 ++++++
 src/router/router.ts       |  6 ++++++
 src/views/SpaceCowboy.vue  | 37 +++++++++++++++++++++++++++++++++++++
 3 files changed, 49 insertions(+)
 create mode 100644 src/assets/icons/alert.svg
 create mode 100644 src/views/SpaceCowboy.vue

diff --git a/src/assets/icons/alert.svg b/src/assets/icons/alert.svg
new file mode 100644
index 0000000..6ece734
--- /dev/null
+++ b/src/assets/icons/alert.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-circle" width="52" height="52" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3a47" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <circle cx="12" cy="12" r="9" />
+  <line x1="12" y1="8" x2="12" y2="12" />
+  <line x1="12" y1="16" x2="12.01" y2="16" />
+</svg>
\ No newline at end of file
diff --git a/src/router/router.ts b/src/router/router.ts
index 8ed7122..c989d8b 100644
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -46,6 +46,12 @@ const routes: Array<RouteRecordRaw> = [
     path: '/about',
     name: 'About',
     component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
+  },
+  {
+    path: '/:catchAll(.*)',
+    name: 'SpaceCowboy',
+    component: () =>
+      import(/* webpackChunkName: "space-cowboy" */ '@/views/SpaceCowboy.vue')
   }
 ]
 
diff --git a/src/views/SpaceCowboy.vue b/src/views/SpaceCowboy.vue
new file mode 100644
index 0000000..9310241
--- /dev/null
+++ b/src/views/SpaceCowboy.vue
@@ -0,0 +1,37 @@
+<template>
+  <main class="space-cowboy content">
+    <p>
+      <img src="@/assets/icons/alert.svg" alt="alert" />
+      Oops, you've been lost!
+      <img src="@/assets/icons/alert.svg" alt="alert" />
+    </p>
+    <p>A note link can't be used as URL.</p>
+    <router-link class="button is-links" :to="{ name: 'Home' }"
+      >return to homepage</router-link
+    >
+  </main>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'SpaceCowboy'
+})
+</script>
+
+<style scoped lang="scss">
+.space-cowboy {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+
+  p {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+}
+</style>