90 lines
5.7 KiB
PHP
90 lines
5.7 KiB
PHP
<div class="relative" x-data="{ open: false }">
|
|
<button
|
|
@click="open = !open"
|
|
class="relative p-2 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
aria-label="Notifications"
|
|
>
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
|
|
</svg>
|
|
@if ($this->unreadCount > 0)
|
|
<span class="absolute -top-1 -right-1 inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-bold leading-none text-white bg-red-500 rounded-full">
|
|
{{ $this->unreadCount > 99 ? '99+' : $this->unreadCount }}
|
|
</span>
|
|
@endif
|
|
</button>
|
|
|
|
<div
|
|
x-show="open"
|
|
@click.away="open = false"
|
|
x-transition:enter="transition ease-out duration-100"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-75"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-95"
|
|
class="absolute right-0 z-50 mt-2 w-80 bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5"
|
|
style="display: none;"
|
|
>
|
|
<div class="flex items-center justify-between px-4 py-3 border-b border-gray-100">
|
|
<h3 class="text-sm font-semibold text-gray-900">Notifications</h3>
|
|
@if ($this->unreadCount > 0)
|
|
<button
|
|
wire:click="markAllAsRead"
|
|
class="text-xs text-blue-600 hover:text-blue-800"
|
|
>
|
|
Mark all as read
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="max-h-96 overflow-y-auto">
|
|
@forelse ($this->notifications as $notification)
|
|
<div
|
|
class="px-4 py-3 border-b border-gray-50 last:border-b-0 {{ $notification->isRead() ? 'bg-white' : 'bg-blue-50' }}"
|
|
wire:key="notification-{{ $notification->id }}"
|
|
>
|
|
<div class="flex items-start gap-3">
|
|
<div class="flex-shrink-0 mt-0.5">
|
|
@if ($notification->severity === \App\Enums\NotificationSeverityEnum::ERROR)
|
|
<svg class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
|
|
</svg>
|
|
@elseif ($notification->severity === \App\Enums\NotificationSeverityEnum::WARNING)
|
|
<svg class="h-5 w-5 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
|
|
</svg>
|
|
@else
|
|
<svg class="h-5 w-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
|
|
</svg>
|
|
@endif
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-gray-900">{{ $notification->title }}</p>
|
|
<p class="text-sm text-gray-500 mt-0.5">{{ $notification->message }}</p>
|
|
<div class="flex items-center justify-between mt-1">
|
|
<span class="text-xs text-gray-400">{{ $notification->created_at->diffForHumans() }}</span>
|
|
@unless ($notification->isRead())
|
|
<button
|
|
wire:click="markAsRead({{ $notification->id }})"
|
|
class="text-xs text-blue-600 hover:text-blue-800"
|
|
>
|
|
Mark read
|
|
</button>
|
|
@endunless
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="px-4 py-8 text-center">
|
|
<svg class="mx-auto h-8 w-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
|
|
</svg>
|
|
<p class="mt-2 text-sm text-gray-500">No notifications</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|