Add notification toasts
This commit is contained in:
@@ -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">×</button>
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user