Initial commit

app/components/snackbar/Error.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <Caption v-bind="{title: 'Lỗi', type: 'has-text-findata'}"></Caption>
+    <div class="field is-grouped mb-0">
+      <div class="control is-expanded pr-3" v-html="content"></div>
+      <div class="control">
+        <SvgIcon v-bind="{name: 'error.svg', type: 'danger', size: 24}"></SvgIcon>
+      </div>
+  </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['content'],
+  methods: {
+    cancel() {
+      this.$store.commit('updateStore', {name: 'showmodal', data:  undefined})
+    }
+  }
+}
+</script>

app/components/snackbar/Info.vue

@@ -0,0 +1,11 @@
+<template>
+  <p v-html="props.content"></p>
+</template>
+<script setup>
+  var props = defineProps({
+    content: String
+  })
+  function cancel() {
+    this.$store.commit('updateStore', {name: 'showmodal', data:  undefined})
+  }
+</script>

app/components/snackbar/SnackBar.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="show">
+    <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({
+  component: String,
+  width: Number,
+  height: Number,
+  vbind: Object,
+  title: String,
+});
+const dynamicComponent = defineAsyncComponent(() => import(`~/components/snackbar/Info.vue`));
+setTimeout(() => store.commit("snackbar", undefined), 3900);
+</script>
+<style>
+.show {
+  position: fixed;
+  z-index: 999;
+  top: 50px;
+  left: 0;
+  right: 0;
+  margin-inline: auto;
+  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: 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;
+  }
+}
+
+@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;
+  }
+}
+</style>

app/components/snackbar/Success.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <Caption v-bind="{title: $stripHtml(title) || 'Thành công', type: 'has-text-primary'}"></Caption>
+    <div class="field is-grouped mb-0 pb-0">
+      <div class="control is-expanded pr-3 mb-0" v-html="content"></div>
+      <div class="control mb-0">
+        <SvgIcon v-bind="{name: 'check2.svg', type: 'primary', size: 24}"></SvgIcon>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['content', 'title'],
+  methods: {
+    cancel() {
+      this.$store.commit('updateStore', {name: 'showmodal', data:  undefined})
+    }
+  }
+}
+</script>