Add notification toasts

2025-07-23 08:57:43 -10:00
parent b25d036f52
commit ffd3bad9da
2 changed files with 32 additions and 0 deletions
@@ -0,0 +1,17 @@
+@props([
+
+    'timeout' => 5000,
+    'id' => uniqid('toast-'),
+    'position' => 'toast-top toast-center',
+])
+
+<div
+        x-data="{ show: true }"
+        x-init="setTimeout(() => show = false, {{ $timeout }})"
+        x-show="show"
+        x-transition
+        id="{{ $id }}"
+        class="toast {{ $position }} z-50"
+>
+    {{ $slot }}
+</div>
@@ -0,0 +1,15 @@
+@props([
+    'type' => 'info',
+    'title' => null,
+    'message' => null,
+])
+
+<div class="alert alert-{{ $type }} shadow-lg" x-data="{ show: true }" x-show="show">
+    <div class="flex-1">
+        @if($title)
+            <h3 class="font-bold">{{ $title }}</h3>
+        @endif
+        <span>{{ $message }}</span>
+    </div>
+    <button @click="show = false" class="btn btn-sm btn-ghost text-xl">&times;</button>
+</div>