changes

app/components/snackbar/Error.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="is-flex is-align-items-center is-gap-1">
-    <Icon
-      name="material-symbols:cancel-rounded"
-      :size="18"
-      class="has-text-danger-80"
-    />
+    <div style="width: 18px; height: 18px">
+      <Icon
+        name="material-symbols:cancel-rounded"
+        :size="18"
+        class="has-text-danger-80"
+      />
+    </div>
     <p
       v-html="content"
       class="control is-expanded"
@@ -14,12 +16,5 @@
 <script setup>
 const props = defineProps({
   content: String,
-  title: String,
 });
-
-const { $store } = useNuxtApp();
-
-function cancel() {
-  $store.commit("updateStore", { name: "showmodal", data: undefined });
-}
 </script>

app/components/snackbar/Info.vue

@@ -5,10 +5,4 @@
 const props = defineProps({
   content: String,
 });
-
-const { $store } = useNuxtApp();
-
-function cancel() {
-  $store.commit("updateStore", { name: "showmodal", data: undefined });
-}
 </script>

app/components/snackbar/SnackBar.vue

@@ -1,34 +1,12 @@
-<template>
-  <div
-    class="snackbar is-flex is-align-items-center is-gap-3 pl-3 pr-1.5 py-2 rounded-md has-background-grey-25 has-text-white"
-  >
-    <component
-      :is="resolvedComponent"
-      v-bind="vbind"
-      @close="$emit('close')"
-    />
-    <button
-      @click="$emit('close')"
-      class="button is-ghost is-small"
-    >
-      <span class="icon">
-        <Icon
-          name="material-symbols:close-rounded"
-          :size="18"
-        />
-      </span>
-    </button>
-  </div>
-</template>
 <script setup>
 import { defineAsyncComponent } from "vue";
 import { useStore } from "@/stores/index";
+import Info from "@/components/snackbar/Info.vue";
+import Success from "@/components/snackbar/Success.vue";
+import Error from "@/components/snackbar/Error.vue";
 const props = defineProps({
   component: String,
-  width: String,
-  height: String,
   vbind: Object,
-  title: String,
 });
 
 const store = useStore();
@@ -58,6 +36,40 @@ watchEffect(() => {
 });
 setTimeout(() => store.commit("snackbar", undefined), 3900);
 </script>
+
+<template>
+  <div
+    class="snackbar is-flex is-align-items-center is-gap-3 pl-3 pr-1.5 py-2 rounded-md has-background-grey-25 has-text-white"
+  >
+    <Info
+      v-if="component === 'Info'"
+      v-bind="vbind"
+      @close="$emit('close')"
+    />
+    <Success
+      v-if="component === 'Success'"
+      v-bind="vbind"
+      @close="$emit('close')"
+    />
+    <Error
+      v-if="component === 'Error'"
+      v-bind="vbind"
+      @close="$emit('close')"
+    />
+    <button
+      @click="$emit('close')"
+      class="button is-ghost is-small"
+    >
+      <span class="icon">
+        <Icon
+          name="material-symbols:close-rounded"
+          :size="18"
+        />
+      </span>
+    </button>
+  </div>
+</template>
+
 <style scoped>
 .snackbar {
   position: fixed;

app/components/snackbar/Success.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="is-flex is-align-items-center is-gap-1">
-    <Icon
-      name="material-symbols:check-circle-rounded"
-      :size="18"
-      class="has-text-success-70"
-    />
+    <div style="width: 18px; height: 18px">
+      <Icon
+        name="material-symbols:check-circle-rounded"
+        :size="18"
+        class="has-text-success-70"
+      />
+    </div>
     <p
       v-html="content"
       class="control is-expanded"
@@ -14,12 +16,5 @@
 <script setup>
 const props = defineProps({
   content: String,
-  title: String,
 });
-
-const { $store } = useNuxtApp();
-
-function cancel() {
-  $store.commit("updateStore", { name: "showmodal", data: undefined });
-}
 </script>