From 0aec35ad2409578c22ec48c5b49183676d82f5a6 Mon Sep 17 00:00:00 2001
From: samy <samy.barbi@yahoo.fr>
Date: Mon, 4 Aug 2025 22:01:02 -1000
Subject: [PATCH] Add notification toast triggerd by event and showed with
 Alpine

---
 .../notifications/event-toast.blade.php       | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 resources/views/components/notifications/event-toast.blade.php

diff --git a/resources/views/components/notifications/event-toast.blade.php b/resources/views/components/notifications/event-toast.blade.php
new file mode 100644
index 0000000..32a118e
--- /dev/null
+++ b/resources/views/components/notifications/event-toast.blade.php
@@ -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>