multi type toast

src/app/components/base/Toast.vue

@@ -11,12 +11,10 @@ defineExpose({
   publish,
 });
 
-// TODO: support multiple types (info, success, error, warning)
+const count = reactive<ToastParams[]>([]);
 
-const count = reactive<{ title: string; message: string }[]>([]);
-
-function publish(e: { title: string; message: string }) {
-  count.push({ title: e.title, message: e.message });
+function publish(e: ToastParams) {
+  count.push({ type: e.type, title: e.title, message: e.message });
 }
 </script>
 
@@ -24,17 +22,20 @@ function publish(e: { title: string; message: string }) {
   <ToastRoot
     v-for="(e, i) in count"
     :key="i"
-    class="data-[state=open]:animate-slideIn data-[state=closed]:animate-hide data-[swipe=end]:animate-swipeOut grid grid-cols-[auto_max-content] items-center gap-x-[15px] rounded-md bg-red-800 p-[15px] text-neutral-200 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] [grid-template-areas:_'title_action'_'description_action'] data-[swipe=cancel]:translate-x-0 data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:transition-[transform_200ms_ease-out]"
+    :class="[
+      `grid grid-cols-[auto_max-content] items-center gap-x-3 rounded-md p-3 text-neutral-200 shadow-lg [grid-template-areas:_'title_action'_'description_action'] data-[swipe=cancel]:translate-x-0 data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]`,
+      {
+        'bg-green-800': e.type === 'success',
+        'bg-red-800': e.type === 'error',
+      },
+    ]"
   >
-    <ToastTitle
-      class="text-slate12 mb-[5px] text-[15px] font-medium [grid-area:_title]"
-    >
+    <ToastTitle class="mb-1 text-sm font-medium [grid-area:_title]">
       {{ e.title }}
     </ToastTitle>
-    <ToastDescription
-      class="text-slate11 m-0 text-[13px] leading-[1.3] [grid-area:_description]"
-      >{{ e.message }}</ToastDescription
-    >
+    <ToastDescription class="m-0 text-sm [grid-area:_description]">{{
+      e.message
+    }}</ToastDescription>
     <ToastAction as-child alt-text="toast" class="[grid-area:_action]">
       <slot />
     </ToastAction>

src/app/stores/toast.ts

@@ -2,7 +2,7 @@ export const useToast = defineStore('Toast', () => {
   const { t: $t } = useI18n();
 
   type ToastInterface = {
-    publish: (e: { title: string; message: string }) => void;
+    publish: (e: ToastParams) => void;
   };
 
   type ToastRef = Ref<null | ToastInterface>;
@@ -38,7 +38,11 @@ export const useToast = defineStore('Toast', () => {
         title = $t('toast.error');
       }
     }
-    toast.value?.value?.publish({ title: title ?? '', message: message ?? '' });
+    toast.value?.value?.publish({
+      type,
+      title: title ?? '',
+      message: message ?? '',
+    });
   }
 
   return { setToast, showToast };

src/app/utils/types.ts

@@ -0,0 +1,6 @@
+export type ToastTypes = 'error' | 'success';
+export type ToastParams = {
+  type: ToastTypes;
+  title: string;
+  message: string;
+};