individual notification design

Author: supalarry

frontend/src/assets/brokenHeart.png

@@ -9,7 +9,7 @@
       id="notifications"
       v-bind:class="{
       'hidden': !showNotifications,
-      'p-4': true,
+      'px-4': true,
       'overflow-scroll': notifications.length > 3,
       'bg-white': true,
       'shadow': true,
@@ -21,26 +21,45 @@
       'mt-10': true,
       'z-50': true,
       'rounded-md': true}">
-      <div v-for="notification in notifications" :key="notification.id">{{notification.text}}</div>
+      <div v-bind:class="{
+        'py-4': true,
+        'flex': true,
+        'word-break': true,
+        'items-center': true,
+        'border-b': true,
+        'font-bold': notification.is_seen,}"
+           v-for="notification in notifications" :key="notification.id">
+        <img v-bind:src="getImage(notification.type)" class="w-4 h-4">
+        <h1 class="ml-4">{{notification.text}}</h1>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import heart from '../../assets/heartOutline.png';
+import heartBroken from '../../assets/brokenHeart.png';
+import message from '../../assets/message.png';
+import view from '../../assets/eye.png';
+import match from '../../assets/linkBlack.png';
+
+/* eslint-disable object-curly-newline */
+/* eslint-disable consistent-return */
+
 export default {
   data: () => ({
     notify: true,
     notifications: [
-      { text: 'Samantha liked you', id: 1 },
-      { text: 'Bae liked you', id: 2 },
-      { text: 'Samantha liked you', id: 3 },
-      { text: 'Bae liked you', id: 4 },
-      { text: 'Samantha liked you', id: 5 },
-      { text: 'Bae liked you', id: 6 },
-      { text: 'Samantha liked you', id: 7 },
-      { text: 'Bae liked you', id: 8 },
-      { text: 'Samantha liked you', id: 9 },
-      { text: 'Bae liked you', id: 10 },
+      { text: 'Samantha liked you', is_seen: false, type: 'like', id: 1 },
+      { text: 'Bae liked you', id: 2, is_seen: false, type: 'dislike' },
+      { text: 'Samantha liked you', id: 3, is_seen: false, type: 'message' },
+      { text: 'Bae liked you', id: 4, is_seen: false, type: 'match' },
+      { text: 'Samantha liked you', id: 5, is_seen: true, type: 'view' },
+      { text: 'Bae liked you', id: 6, is_seen: true, type: 'like' },
+      { text: 'Samantha liked you', id: 7, is_seen: true, type: 'like' },
+      { text: 'Bae liked you', id: 8, is_seen: true, type: 'like' },
+      { text: 'Samantha liked you', id: 9, is_seen: true, type: 'like' },
+      { text: 'Bae liked youBae liked youBae liked youBae liked youBae liked youBae liked you', id: 10, is_seen: true, type: 'like' },
     ],
     showNotifications: false,
   }),
@@ -54,6 +73,23 @@ export default {
         this.notify = false;
       }
     },
+    getImage(type) {
+      if (type === 'like') {
+        return heart;
+      }
+      if (type === 'dislike') {
+        return heartBroken;
+      }
+      if (type === 'match') {
+        return match;
+      }
+      if (type === 'view') {
+        return view;
+      }
+      if (type === 'message') {
+        return message;
+      }
+    },
   },
 };
 </script>