first commit

resources/js/layouts/components/NavBarNotifications.vue

@@ -0,0 +1,99 @@
+<script setup>
+import avatar4 from '@images/avatars/avatar-4.png'
+import avatar5 from '@images/avatars/avatar-5.png'
+
+const notifications = ref([
+  {
+    id: 1,
+    img: avatar4,
+    title: 'Congratulation Flora! 🎉',
+    subtitle: 'Won the monthly best seller badge',
+    time: 'Today',
+    isSeen: true,
+  },
+  {
+    id: 2,
+    text: 'Cecilia Becker',
+    title: 'Cecilia Becker',
+    subtitle: 'Accepted your connection',
+    time: '12h ago',
+    isSeen: false,
+    color: 'primary',
+  },
+  {
+    id: 3,
+    img: avatar5,
+    title: 'New message received 👋🏻',
+    subtitle: 'You have 10 unread messages',
+    time: '11 Aug',
+    isSeen: true,
+  },
+  {
+    id: 4,
+    icon: 'ri-bar-chart-line',
+    title: 'Monthly report generated',
+    subtitle: 'July month financial report is generated',
+    time: 'Apr 24, 10:30 AM',
+    isSeen: false,
+    color: 'info',
+  },
+  {
+    id: 5,
+    text: 'Meta Gadgets',
+    title: 'Application has been approved 🚀',
+    subtitle: 'Your Meta Gadgets project application has been approved.',
+    time: 'Feb 17, 12:17 PM',
+    isSeen: false,
+    color: 'success',
+  },
+  {
+    id: 6,
+    icon: 'ri-mail-line',
+    title: 'New message from Harry',
+    subtitle: 'You have new message from Harry',
+    time: 'Jan 6, 1:48 PM',
+    isSeen: true,
+    color: 'error',
+  },
+])
+
+const removeNotification = notificationId => {
+  notifications.value.forEach((item, index) => {
+    if (notificationId === item.id)
+      notifications.value.splice(index, 1)
+  })
+}
+
+const markRead = notificationId => {
+  notifications.value.forEach(item => {
+    notificationId.forEach(id => {
+      if (id === item.id)
+        item.isSeen = true
+    })
+  })
+}
+
+const markUnRead = notificationId => {
+  notifications.value.forEach(item => {
+    notificationId.forEach(id => {
+      if (id === item.id)
+        item.isSeen = false
+    })
+  })
+}
+
+const handleNotificationClick = notification => {
+  if (!notification.isSeen)
+    markRead([notification.id])
+}
+</script>
+
+<template>
+  <Notifications
+    :notifications="notifications"
+    @remove="removeNotification"
+    @read="markRead"
+    @unread="markUnRead"
+    @click:notification="handleNotificationClick"
+  />
+</template>