Move toaster component to AppLayout #33

resources/js/lib/utils.ts

@@ -1,6 +1,7 @@
-import { InertiaLinkProps } from '@inertiajs/vue3';
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { InertiaLinkProps } from '@inertiajs/vue3'
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+import { toast } from 'vue-sonner'
 
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
@@ -68,4 +69,36 @@ export function bgColorForString(input: string): string {
         charCodeSum += input.charCodeAt(i)
     }
     return randomColors[charCodeSum % randomColors.length];
+}
+
+const promise = () => new Promise((resolve) => setTimeout(resolve, 2000))
+export function testToast() {
+    let delay = 150
+    toast('Toast', {
+        description: "Description bjksad fkjlhsd fkjhsdf jkshdf jkashdf adskljhf ", action: {
+            label: 'Undo',
+            onClick: () => console.log('Undo')
+        }
+    })
+    setTimeout(() => {
+        toast.info('Info', {
+            action: {
+                label: 'Undo',
+                onClick: () => console.log('Undo')
+            }
+        })
+    }, delay * 1)
+    setTimeout(() => { toast.success('Success', { description: "description" }) }, delay * 2)
+    setTimeout(() => { toast.warning('Warning', { description: "description" }) }, delay * 3)
+    setTimeout(() => { toast.error('Error', { description: "description" }) }, delay * 4)
+    setTimeout(() => {
+        toast.promise(promise, {
+            loading: 'Loading...',
+            success: (data) => {
+                return `${data.name} toast has been added`;
+            },
+            error: (data: any) => 'Error',
+        })
+    }, delay * 5)
+
 }