changes

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;