Add notification toast triggerd by event and showed with Alpine

2025-08-04 22:01:02 -10:00
parent f96e23f799
commit 0aec35ad24
1 changed files with 40 additions and 0 deletions
@@ -0,0 +1,40 @@
+@props([
+'eventName' => 'showToast',
+'position' => 'toast-top toast-center',
+])
+
+<div
+    x-data="{ toast: null }"
+    x-init="
+        window.addEventListener('{{ $eventName }}', event => {
+            toast = {
+                title: event.detail.title,
+                message: event.detail.message,
+                type: event.detail.type,
+            };
+
+            setTimeout(() => toast = null, 4000);
+        })
+    "
+    class="toast {{ $position }} z-50"
+>
+    <template x-if="toast">
+        <template x-if="toast">
+            <div
+                x-transition
+                class="alert shadow-lg"
+                :class="{
+                'alert-error': toast.type === 'error',
+                'alert-success': toast.type === 'success',
+                'alert-warning': toast.type === 'warning',
+                'alert-info': toast.type === 'info',
+            }"
+            >
+                <div>
+                    <span class="font-bold" x-html="toast.title"></span>
+                    <span class="block text-sm" x-html="toast.message"></span>
+                </div>
+            </div>
+        </template>
+    </template>
+</div>