implemented notification component and logic

src/components/Notification.vue

@@ -0,0 +1,41 @@
+<template>
+
+<div class="toast-container position-absolute top-0 start-50 mt-3 translate-middle-x">
+    <transition-group name="fade">
+        <div v-for="(note, index) in notifications" :key="index" data-bs-delay="2000" data-bs-autohide="true" class="show fade toast border-0 text-white" :class="toastClasses(note.type)" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="d-flex">
+            <div class="toast-body">
+                {{note.text}}
+            </div>
+            <button type="button" @click="destroyAlert(index)" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
+            </div>
+        </div>
+    </transition-group>
+</div>
+
+</template>
+
+<script setup lang="ts">
+import { useNotifications } from '@/stores/notifications'
+import { storeToRefs } from 'pinia'
+
+const notes = useNotifications()
+const { notifications } = storeToRefs(notes)
+
+function destroyAlert(index : number) {
+    notes.removeAlert(index)
+}
+
+function toastClasses(type : string){
+    return {
+        'bg-danger': type === 'danger',
+        'bg-success' : type === 'success',
+        'bg-warning' : type === 'warning'
+    }
+}
+
+</script>
+
+<style scoped>
+
+</style>