40 lines
2.7 KiB
PHP
40 lines
2.7 KiB
PHP
<div class="fixed bottom-4 right-4 z-50 flex flex-col gap-2 pointer-events-none">
|
|
@foreach($toasts as $t)
|
|
<div wire:key="{{ $t['id'] }}"
|
|
x-data="{ show: true }"
|
|
x-init="setTimeout(() => { show = false; setTimeout(() => $wire.dismiss('{{ $t['id'] }}'), 300); }, {{ $t['duration'] }})"
|
|
x-show="show"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0 translate-y-2"
|
|
x-transition:enter-end="opacity-100 translate-y-0"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100 translate-y-0"
|
|
x-transition:leave-end="opacity-0 translate-y-2"
|
|
class="pointer-events-auto min-w-64 max-w-sm px-4 py-3 rounded-xl border shadow-lg backdrop-blur-sm
|
|
@if($t['type']==='success') bg-green/10 border-green/30 text-green
|
|
@elseif($t['type']==='error') bg-red/10 border-red/30 text-red
|
|
@elseif($t['type']==='warning') bg-amber/10 border-amber/30 text-amber
|
|
@else bg-blue/10 border-blue/30 text-blue @endif"
|
|
x-cloak>
|
|
<div class="flex items-center gap-3">
|
|
{{-- Icon --}}
|
|
<span class="flex-shrink-0 w-4 h-4">
|
|
@if($t['type']==='success')
|
|
<svg fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l3.5 3.5L13 5"/></svg>
|
|
@elseif($t['type']==='error')
|
|
<svg fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5v3m0 3h.01M4.93 4.93l6.14 6.14"/></svg>
|
|
@elseif($t['type']==='warning')
|
|
<svg fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 3l5.5 10H2.5L8 3zm0 4v2.5m0 1.5h.01"/></svg>
|
|
@else
|
|
<svg fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="2"><circle cx="8" cy="8" r="5"/><path stroke-linecap="round" d="M8 6v2.5m0 1.5h.01"/></svg>
|
|
@endif
|
|
</span>
|
|
<span class="flex-1 text-sm font-medium">{{ $t['message'] }}</span>
|
|
<button wire:click="dismiss('{{ $t['id'] }}')"
|
|
class="flex-shrink-0 opacity-50 hover:opacity-100 transition-opacity text-lg leading-none"
|
|
aria-label="Dismiss"><x-heroicon-o-x-mark class="w-3.5 h-3.5" /></button>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|