changes

app/components/snackbar/SnackBar.vue

@@ -1,28 +1,29 @@
 <template>
-  <div class="show">
+  <div class="snackbar has-text-white has-background-grey-35 px-3 py-2 rounded-md">
     <component
       :is="dynamicComponent"
       v-bind="vbind"
       @close="$emit('close')"
-    ></component>
+    />
   </div>
 </template>
 <script setup>
 import { defineAsyncComponent } from "vue";
 import { useStore } from "@/stores/index";
-const store = useStore();
-var props = defineProps({
+const props = defineProps({
   component: String,
-  width: Number,
-  height: Number,
+  width: String,
+  height: String,
   vbind: Object,
   title: String,
 });
-const dynamicComponent = defineAsyncComponent(() => import(`~/components/snackbar/Info.vue`));
+
+const store = useStore();
+const dynamicComponent = defineAsyncComponent(() => import(`../snackbar/${props.component || "Info"}.vue`));
 setTimeout(() => store.commit("snackbar", undefined), 3900);
 </script>
-<style>
-.show {
+<style scoped>
+.snackbar {
   position: fixed;
   z-index: 999;
   top: 50px;
@@ -32,10 +33,6 @@ setTimeout(() => store.commit("snackbar", undefined), 3900);
   width: fit-content;
   max-width: 500px;
 
-  background-color: #303030;
-  color: white;
-  border-radius: 6px;
-  padding: 10px;
   /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
   However, delay the fade out process for 2.5 seconds */
   -webkit-animation: