Added illustration & mezssage when a page doe not contain any mod / projects (#133)

* Added new messages with illustration displaying that this page does not contain any elements
Fixed 404 error after deleting mod

* Fixed typo

pages/dashboard/projects.vue

@@ -6,32 +6,42 @@
         Create a mod
       </nuxt-link>
     </div>
-    <ModCard
-      v-for="mod in mods"
-      :id="mod.slug ? mod.slug : mod.id"
-      :key="mod.id"
-      :author="mod.author"
-      :name="mod.title"
-      :description="mod.description"
-      :latest-version="mod.latest_version"
-      :created-at="mod.published"
-      :updated-at="mod.updated"
-      :downloads="mod.downloads.toString()"
-      :icon-url="mod.icon_url"
-      :author-url="mod.author_url"
-      :page-url="mod.page_url"
-      :categories="mod.categories"
-      :edit-mode="true"
-      :status="mod.status"
-      :is-modrinth="true"
-    >
-      <nuxt-link
-        class="button column edit-button"
-        :to="'/mod/' + mod.id + '/settings'"
+    <div v-if="mods.length !== 0">
+      <ModCard
+        v-for="mod in mods"
+        :id="mod.slug ? mod.slug : mod.id"
+        :key="mod.id"
+        :author="mod.author"
+        :name="mod.title"
+        :description="mod.description"
+        :latest-version="mod.latest_version"
+        :created-at="mod.published"
+        :updated-at="mod.updated"
+        :downloads="mod.downloads.toString()"
+        :icon-url="mod.icon_url"
+        :author-url="mod.author_url"
+        :page-url="mod.page_url"
+        :categories="mod.categories"
+        :edit-mode="true"
+        :status="mod.status"
+        :is-modrinth="true"
       >
-        Settings
-      </nuxt-link>
-    </ModCard>
+        <nuxt-link
+          class="button column edit-button"
+          :to="'/mod/' + mod.id + '/settings'"
+        >
+          Settings
+        </nuxt-link>
+      </ModCard>
+    </div>
+    <div v-else class="error">
+      <UpToDate class="icon"></UpToDate><br />
+      <span class="text"
+        >You don't have any mods.<br />
+        Would you like to
+        <nuxt-link class="link" to="/mod/create">create one</nuxt-link>?</span
+      >
+    </div>
   </DashboardPage>
 </template>
 
@@ -39,11 +49,13 @@
 import axios from 'axios'
 import ModCard from '@/components/ProjectCard'
 import DashboardPage from '@/components/DashboardPage'
+import UpToDate from '~/assets/images/illustrations/up_to_date.svg?inline'
 
 export default {
   components: {
     DashboardPage,
     ModCard,
+    UpToDate,
   },
   async asyncData(data) {
     let res = await axios.get(
@@ -72,6 +84,31 @@ export default {
   align-self: flex-end;
   margin-right: 2rem;
 }
+
+.error {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+
+  .icon {
+    width: 8rem;
+    height: 8rem;
+    margin: 1.5rem 0;
+  }
+
+  .text {
+    text-align: center;
+    margin-bottom: 2rem;
+    font-size: 1.25rem;
+  }
+
+  .link {
+    text-decoration: underline;
+  }
+}
+
 // .buttonse {
 //   margin-left: 4.5rem;
 //   padding: 0.5rem 2rem 0.5rem 2rem;