changes

app/components/snackbar/SnackBar.vue

@@ -1,10 +1,23 @@
 <template>
-  <div class="snackbar has-text-white has-background-grey-35 px-3 py-2 rounded-md">
+  <div
+    class="snackbar is-flex is-align-items-center is-gap-3 pl-3 pr-1.5 py-2 rounded-md has-background-grey-35 has-text-white"
+  >
     <component
-      :is="dynamicComponent"
+      :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>
@@ -19,7 +32,30 @@ const props = defineProps({
 });
 
 const store = useStore();
-const dynamicComponent = defineAsyncComponent(() => import(`../snackbar/${props.component || "Info"}.vue`));
+const componentFiles = import.meta.glob("@/components/**/*.vue");
+const resolvedComponent = shallowRef(null);
+
+function loadDynamicComponent() {
+  if (!props.component) {
+    resolvedComponent.value = null;
+    return;
+  }
+
+  const fullPath = `/components/snackbar/${props.component}.vue`;
+  const componentPath = Object.keys(componentFiles).find((path) => path.endsWith(fullPath));
+
+  if (componentPath) {
+    resolvedComponent.value = defineAsyncComponent(componentFiles[componentPath]);
+  } else {
+    console.error(`Không tìm thấy component tại: ${fullPath}`);
+    resolvedComponent.value = null;
+  }
+}
+
+// Theo dõi sự thay đổi của props.component để load lại nếu cần
+watchEffect(() => {
+  loadDynamicComponent();
+});
 setTimeout(() => store.commit("snackbar", undefined), 3900);
 </script>
 <style scoped>
@@ -32,59 +68,13 @@ setTimeout(() => store.commit("snackbar", undefined), 3900);
   margin-inline: auto;
   width: fit-content;
   max-width: 500px;
-
-  /* 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:
-    fadein 0.5s,
-    fadeout 0.5s 3.5s;
-  animation:
-    fadein 0.5s,
-    fadeout 0.5s 3.5s;
 }
 
-/* Animations to fade the snackbar in and out */
-@-webkit-keyframes fadein {
-  from {
-    top: 0;
-    opacity: 0;
-  }
-  to {
-    top: 50px;
-    opacity: 1;
-  }
+.button.is-ghost {
+  color: white;
 }
-
-@keyframes fadein {
-  from {
-    top: 0;
-    opacity: 0;
-  }
-  to {
-    top: 50px;
-    opacity: 1;
-  }
-}
-
-@-webkit-keyframes fadeout {
-  from {
-    top: 50px;
-    opacity: 1;
-  }
-  to {
-    top: 0;
-    opacity: 0;
-  }
-}
-
-@keyframes fadeout {
-  from {
-    top: 50px;
-    opacity: 1;
-  }
-  to {
-    top: 0;
-    opacity: 0;
-  }
+.button.is-ghost:hover,
+.button.is-ghost.is-hovered {
+  color: hsl(0, 0%, 100%, 0.6);
 }
 </style>