25 lines
1.2 KiB
PHP
25 lines
1.2 KiB
PHP
{{-- Toaster: catches Livewire-dispatched `notify` browser events. Shared by the app
|
|
and auth layouts so notifications surface on every page. --}}
|
|
<div
|
|
x-data="{ toasts: [] }"
|
|
x-on:notify.window="
|
|
const msg = $event.detail?.message ?? $event.detail?.[0]?.message ?? @js(__('shell.toast_done'));
|
|
const level = $event.detail?.level ?? $event.detail?.[0]?.level ?? 'success';
|
|
const id = (window.crypto?.randomUUID?.() ?? String(Date.now() + Math.random()));
|
|
toasts.push({ id, msg, level });
|
|
setTimeout(() => { toasts = toasts.filter(t => t.id !== id) }, 4000);
|
|
"
|
|
class="pointer-events-none fixed inset-x-0 bottom-4 z-50 flex flex-col items-center gap-2 px-4 sm:items-end sm:px-6"
|
|
aria-live="polite"
|
|
>
|
|
<template x-for="t in toasts" :key="t.id">
|
|
<div
|
|
x-transition.opacity.duration.200ms
|
|
class="pointer-events-auto flex items-center gap-2.5 rounded-md border border-line bg-raised px-4 py-2.5 shadow-pop"
|
|
>
|
|
<span class="h-1.5 w-1.5 shrink-0 rounded-full" :class="t.level === 'error' ? 'bg-offline' : 'bg-online'"></span>
|
|
<span class="font-mono text-xs text-ink-2" x-text="t.msg"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|