feat: improve Error component to be more dynamic

components/utils/Error.vue

@@ -0,0 +1,63 @@
+<template>
+  <div
+    class="p-2 m-6 text-center text-default-text"
+    :class="{ 'material-container': renderBorders }"
+  >
+    <!-- Header -->
+    <div>
+      <h1
+        class="px-2 mx-auto mb-1 text-2xl font-bold tracking-wide border w-max-content"
+      >
+        {{ errorTitle }}
+      </h1>
+    </div>
+
+    <!-- Body -->
+    <div>
+      <p>
+        {{ errorData }}
+      </p>
+    </div>
+
+    <!-- Action -->
+    <div v-if="showAction">
+      <button type="button" class="color-util" @click="reload()">
+        Reload the page?
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Error',
+
+  props: {
+    errorTitle: {
+      type: String,
+      default: 'Error',
+    },
+
+    errorData: {
+      type: String,
+      default: 'Something went wrong',
+    },
+
+    showAction: {
+      type: Boolean,
+      default: true,
+    },
+
+    renderBorders: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  methods: {
+    reload() {
+      location.reload()
+    },
+  },
+}
+</script>

components/utils/ErrorManager.vue

@@ -0,0 +1,21 @@
+<template>
+  <Error v-if="errors" />
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+import Error from './Error'
+
+export default {
+  name: 'ErrorManager',
+
+  components: {
+    Error,
+  },
+
+  computed: {
+    ...mapState(['errors']),
+  },
+}
+</script>

pages/index.vue

@@ -8,7 +8,7 @@
     </div>
 
     <!-- Content -->
-    <Errors />
+    <ErrorManager />
 
     <Post v-for="post in posts.data" :key="post.id" :post="post" />
 
@@ -22,14 +22,14 @@ import { mapState } from 'vuex'
 // Components
 import DomainSelector from '~/components/pages/posts/domain/Selector.vue'
 import Post from '~/components/pages/posts/content/Post.vue'
-import Errors from '~/components/utils/Errors.vue'
+import ErrorManager from '~/components/utils/ErrorManager.vue'
 
 // Mixins
 import PostsStartupMixin from '~/components/pages/posts/util/PostsStartupMixin.js'
 
 export default {
   components: {
-    Errors,
+    ErrorManager,
     DomainSelector,
     Notifications: () =>
       import('~/components/pages/posts/navigation/Notifications.vue'),

pages/premium/index.vue

@@ -42,7 +42,7 @@
     <template v-else>
       <div class="flex flex-col h-screen m-auto justify-evenly">
         <!-- Log In -->
-        <errors />
+        <ErrorManager />
 
         <login />
 
@@ -63,10 +63,10 @@ import Login from '@/components/pages/premium/Login'
 import Subscription from '@/components/pages/premium/Subscription'
 import PremiumDashboard from '@/components/pages/premium/PremiumDashboard'
 
-import Errors from '~/components/utils/Errors.vue'
+import ErrorManager from '~/components/utils/ErrorManager.vue'
 
 export default {
-  components: { Login, Subscription, Errors, PremiumDashboard },
+  components: { Login, Subscription, ErrorManager, PremiumDashboard },
 
   computed: {
     ...mapGetters('premium', ['hasValidLicenseKey']),