Add toast component to show notifications on the frontend

resources/views/components/icons/checkCircle.blade.php

@@ -0,0 +1,5 @@
+<svg {{ $attributes }} data-slot="icon" aria-hidden="true" fill="none" stroke-width="1.5" stroke="currentColor"
+    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" stroke-linecap="round"
+        stroke-linejoin="round"></path>
+</svg>

resources/views/components/icons/exclamationCircle.blade.php

@@ -0,0 +1,5 @@
+<svg {{ $attributes }} data-slot="icon" aria-hidden="true" fill="none" stroke-width="1.5" stroke="currentColor"
+    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" stroke-linecap="round"
+        stroke-linejoin="round"></path>
+</svg>

resources/views/components/icons/exclamationTriangle.blade.php

@@ -0,0 +1,6 @@
+<svg {{ $attributes }} data-slot="icon" aria-hidden="true" fill="none" stroke-width="1.5" stroke="currentColor"
+    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+        stroke-linecap="round" stroke-linejoin="round"></path>
+</svg>

resources/views/components/layouts/appMain.blade.php

@@ -1,5 +1,7 @@
 <main class="flex flex-grow bg-light-base-100 dark:bg-base-800 text-light-base-950 dark:text-base-50">
-    <div class="flex flex-grow max-w-[63rem] mx-auto bg-light-base-50 dark:bg-base-900">
+    <div class="relative flex flex-grow max-w-[63rem] mx-auto bg-light-base-50 dark:bg-base-900">
         {{ $slot }}
+
+        <x-toast />
     </div>
 </main>

resources/views/components/toast/index.blade.php

@@ -0,0 +1,32 @@
+<div x-data="{
+    toasts: [],
+    remove(key) {
+        this.toasts = this.toasts.filter((toast) => toast.key != key);
+    },
+}"
+    @toast.window="
+        const toast = {
+            key: Date.now(),
+            message: $event.detail.message,
+            type: $event.detail.type ?? '',
+        };
+        toasts.push(toast);
+        setTimeout(() => remove(toast.key), $event.detail.duration ?? 2500);
+    "
+    class="absolute w-full z-[99] max-w-xs right-0 bottom-0 mb-4 px-4">
+    <ul class="flex flex-col gap-2">
+        <template x-for="toast in toasts" :key="toast.key">
+            <li
+                class="w-full duration-300 ease-out border rounded-md bg-light-base-200 dark:bg-base-950 border-light-base-300 dark:border-base-500">
+                <button class="flex items-start gap-1 p-3 text-sm" @click="remove(toast.key)">
+                    <x-icons.checkCircle x-show="toast.type == 'success'" class="w-5 h-5 text-success-600" />
+                    <x-icons.exclamationCircle x-show="toast.type == 'error'" class="w-5 h-5 text-error-600" />
+                    <x-icons.exclamationTriangle x-show="toast.type == 'warning'" class="w-5 h-5 text-warning-600" />
+                    <x-icons.informationCircle x-show="toast.type == 'info'" class="w-5 h-5 text-info-600" />
+
+                    <span x-text="toast.message"></span>
+                </button>
+            </li>
+        </template>
+    </ul>
+</div>