Implement no content component

Author: nemoipaha

frontend/src/components/common/NoContent.vue

@@ -0,0 +1,33 @@
+<template>
+    <section class="hero is-info" v-show="show">
+        <div class="hero-body">
+            <div class="has-text-centered">
+                <p class="title">
+                    {{ title }}
+                </p>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script>
+export default {
+    name: 'NoContent',
+
+    props: {
+        title: {
+            default: 'No content :)',
+            type: String
+        },
+
+        show: {
+            type: Boolean,
+            required: true
+        }
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

frontend/src/components/view/feed/FeedContainer.vue

@@ -14,6 +14,8 @@
             </b-button>
         </div>
 
+        <NoContent :show="!tweets.length" title="No tweets yet :)" />
+
         <TweetPreviewList :tweets="tweets" />
 
         <b-modal :active.sync="isNewTweetModalActive" has-modal-card>
@@ -25,6 +27,7 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
 import TweetPreviewList from '../../common/TweetPreviewList.vue';
+import NoContent from '../../common/NoContent.vue';
 import NewTweetForm from './NewTweetForm.vue';
 
 export default {
@@ -33,6 +36,7 @@ export default {
     components: {
         TweetPreviewList,
         NewTweetForm,
+        NoContent
     },
 
     data: () => ({

frontend/src/components/view/user/UserContainer.vue

@@ -1,16 +1,21 @@
 <template>
-    <TweetPreviewList :tweets="tweets" />
+    <div class="user-container">
+        <TweetPreviewList :tweets="tweets" />
+        <NoContent :show="!tweets.length" title="No tweets yet :)" />
+    </div>
 </template>
 
 <script>
 import { mapActions } from 'vuex';
 import TweetPreviewList from '@/components/common/TweetPreviewList.vue';
+import NoContent from '@/components/common/NoContent.vue';
 
 export default {
     name: 'UserContainer',
 
     components: {
         TweetPreviewList,
+        NoContent
     },
 
     data: () => ({