introduce notification type

src/components/Notification.vue

@@ -1,15 +1,20 @@
 <template>
-  <div class="new-notification rounded" v-if="store.visible">
-    <div>{{ store.text }}</div>
+  <div
+    class="new-notif rounded"
+    :class="{ 'notif-error': notif.type == NotificationType.Error }"
+    v-if="notif.visible"
+  >
+    <div>{{ notif.text }}</div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useNotificationStore } from "../stores/notification";
-const store = useNotificationStore();
+import { useNotificationStore, NotificationType } from "../stores/notification";
+
+const notif = useNotificationStore();
 </script>
 <style lang="scss">
-.new-notification {
+.new-notif {
   position: fixed;
   z-index: 2000;
   width: 25rem;
@@ -26,4 +31,8 @@ const store = useNotificationStore();
     text-decoration: underline;
   }
 }
+
+.notif-error {
+  background-color: $red;
+}
 </style>

src/stores/notification.ts

@@ -1,13 +1,21 @@
 import { defineStore } from "pinia";
 
+enum NotificationType {
+  Success,
+  Error,
+}
+
 const useNotificationStore = defineStore("notification", {
   state: () => ({
     text: "",
+    type: NotificationType.Success,
     visible: false,
   }),
   actions: {
-    showNotification(new_text: string) {
+    showNotification(new_text: string, new_type?: NotificationType) {
+      console.log(arguments);
       this.text = new_text;
+      this.type = new_type;
       this.visible = true;
 
       setTimeout(() => {
@@ -18,9 +26,9 @@ const useNotificationStore = defineStore("notification", {
 });
 
 class Notification {
-  constructor(text: string) {
-    useNotificationStore().showNotification(text);
+  constructor(text: string, type?: NotificationType) {
+    useNotificationStore().showNotification(text, type);
   }
 }
 
-export { useNotificationStore, Notification };
+export { useNotificationStore, Notification, NotificationType };