Added empty component

components/Empty.vue

@@ -0,0 +1,57 @@
+<template>
+  <ds-space
+    class="hc-empty"
+    margin="x-large"
+    centered
+  >
+    <ds-text>
+      <img
+        :src="iconPath"
+        width="80"
+        class="hc-empty-icon"
+        style="margin-bottom: 5px"
+        alt="Empty"
+      ><br>
+      <ds-text
+        class="hc-empty-message"
+        color="softer"
+      >
+        {{ message }}
+      </ds-text>
+    </ds-text>
+  </ds-space>
+</template>
+
+<script>
+export default {
+  name: 'HcEmpty',
+  props: {
+    /**
+     * Icon that should be shown
+     * @options messages|events|alert|tasks|docs|file
+     */
+    icon: {
+      type: String,
+      required: true,
+      validator: value => {
+        return value.match(/(messages|events|alert|tasks|docs|file)/)
+      }
+    },
+    /**
+     * Message that appears under the icon
+     */
+    message: { type: String, required: true }
+  },
+  computed: {
+    iconPath() {
+      return `/img/empty/${this.icon}.svg`
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.hc-empty-icon {
+  padding-bottom: $font-space-large;
+}
+</style>

pages/moderation/index.vue

@@ -74,27 +74,21 @@
         </nuxt-link>
       </template>
     </ds-table>
-    <ds-section
-      v-else
-      centered
-    >
-      <ds-text>
-        <img
-          src="/img/empty-state.svg"
-          width="80"
-          style="margin-bottom: 5px"
-          alt="Empty"
-        ><br>
-        <b>NO REPORTS</b>
-      </ds-text>
-    </ds-section>
+    <hc-empty
+      icon="alert"
+      message="Glückwunsch, es gibt nichts zu moderieren."
+    />
   </ds-card>
 </template>
 
 <script>
 import gql from 'graphql-tag'
+import HcEmpty from '~/components/Empty.vue'
 
 export default {
+  components: {
+    HcEmpty
+  },
   data() {
     return {
       Report: []

styleguide/src/system/components/layout/Space/Space.vue

@@ -2,7 +2,11 @@
   <component
     :is="tag"
     :style="styles"
-    class="ds-space">
+    class="ds-space"
+    :class="[
+      centered && `ds-space-centered`
+    ]"
+  >
     <slot />
   </component>
 </template>
@@ -49,7 +53,7 @@ export default {
     /**
      * Center content vertacally and horizontally
      */
-    center: {
+    centered: {
       type: Boolean,
       default: false
     },

styleguide/src/system/components/layout/Space/style.scss

@@ -1,3 +1,7 @@
 .ds-space {
   @include reset;
-}
+}
+
+.ds-space-centered {
+  text-align: center;
+}