mirror of
https://github.com/NNTmux/newznab-tmux.git
synced 2026-08-28 22:01:33 +00:00
DariusIII
42 lines
2.2 KiB
PHP
42 lines
2.2 KiB
PHP
{{-- Toast Notification Component - Alpine.js CSP Safe --}}
|
|
{{-- The toastContainer component is defined in resources/js/alpine/components/toast-notification.js --}}
|
|
{{-- The toast store is defined in resources/js/alpine/stores/toast.js --}}
|
|
|
|
<!-- Toast Notification Container - Alpine.js CSP Safe -->
|
|
<div x-data="toastContainer"
|
|
class="fixed top-4 right-4 z-9999 flex flex-col gap-2 pointer-events-none"
|
|
aria-live="polite"
|
|
aria-atomic="true">
|
|
<template x-for="toast in items()" :key="toast.id">
|
|
<div class="pointer-events-auto max-w-sm w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden transform transition-all duration-300"
|
|
:class="toast.removing ? 'opacity-0 translate-x-full' : 'opacity-100 translate-x-0'"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 translate-x-full"
|
|
x-transition:enter-end="opacity-100 translate-x-0"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 translate-x-0"
|
|
x-transition:leave-end="opacity-0 translate-x-full">
|
|
<div class="p-4 flex items-start gap-3">
|
|
<div class="shrink-0">
|
|
<i class="fas"
|
|
:class="[
|
|
iconFor(toast.type),
|
|
toast.type === 'success' ? 'text-green-500' : '',
|
|
toast.type === 'error' ? 'text-red-500' : '',
|
|
toast.type === 'warning' ? 'text-yellow-500' : '',
|
|
toast.type === 'info' ? 'text-blue-500' : ''
|
|
]"></i>
|
|
</div>
|
|
<div class="flex-1 text-sm text-gray-700 dark:text-gray-300" x-text="toast.message"></div>
|
|
<button type="button"
|
|
@click="dismiss(toast.id)"
|
|
class="shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition"
|
|
aria-label="Dismiss notification">
|
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|