Move toaster component to AppLayout #33

resources/js/layouts/AppLayout.vue

@@ -3,6 +3,9 @@ import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
 // import AppLayout from '@/layouts/app/AppHeaderLayout.vue'; 
 import type { BreadcrumbItemType } from '@/types';
 import { computed, onMounted } from 'vue';
+import 'vue-sonner/style.css'
+import { Toaster } from 'vue-sonner'
+import { Info, CircleAlert, CircleCheck, LoaderCircle, Ban } from "lucide-vue-next"
 
 interface Props {
     breadcrumbs?: BreadcrumbItemType[];
@@ -21,7 +24,43 @@ onMounted(() => {
 </script>
 
 <template>
+    <!-- :duration="120000" -->
+    <Toaster position="top-right" :expand="true" closeButton :visible-toasts="6" :offset="'1rem'" :toastOptions="{
+        unstyled: true,
+        classes: {
+            toast: 'bg-muted rounded-lg w-80 text-sm shadow-lg/20 p-3 pl-5 flex gap-3',
+            title: 'font-bold',
+            description: 'text-',
+            actionButton: 'bg-background hover:bg-accent border-1 rounded shadow text-foreground px-2 h-8 ml-auto whitespace-nowrap',
+            cancelButton: '',
+            closeButton: 'bg-background hover:bg-accent text-foreground stroke-2 rounded-full w-5 h-5 absolute -left-2 -top-2 flex justify-center items-center shadow-md',
+            info: 'text-blue-500 dark:text-blue-400',
+            error: 'text-white bg-red-500 dark:bg-red-800',
+            success: 'text-green-600 dark:text-green-500',
+            warning: 'text-white bg-amber-500! dark:bg-amber-600!',
+        }
+    }">
+        <template #loading-icon>
+            <div class="animate-spin">
+                <LoaderCircle />
+            </div>
+        </template>
+        <template #success-icon>
+            <CircleCheck />
+        </template>
+        <template #error-icon>
+            <Ban />
+        </template>
+        <template #info-icon>
+            <Info />
+        </template>
+        <template #warning-icon>
+            <CircleAlert />
+        </template>
+    </Toaster>
+
     <AppLayout :breadcrumbs="breadcrumbs">
         <slot />
     </AppLayout>
+
 </template>