55 lines
2.7 KiB
PHP
55 lines
2.7 KiB
PHP
<div class="relative" x-data="{ open: @entangle('open') }" @click.outside="open = false">
|
|
<button
|
|
wire:click="toggle"
|
|
class="w-8 h-8 flex items-center justify-center rounded-lg text-t2 hover:text-t1 hover:bg-s2 transition-colors"
|
|
aria-label="Notifications"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8 1.5a5 5 0 00-5 5v2.5l-1 1.5h12l-1-1.5V6.5a5 5 0 00-5-5zM6.5 13.5a1.5 1.5 0 003 0"/>
|
|
</svg>
|
|
</button>
|
|
|
|
@if($this->unreadCount > 0)
|
|
<span class="absolute top-1 right-1 w-3.5 h-3.5 bg-blue rounded-full text-white text-[9px] font-medium flex items-center justify-center leading-none pointer-events-none">
|
|
{{ $this->unreadCount > 9 ? '9+' : $this->unreadCount }}
|
|
</span>
|
|
@endif
|
|
|
|
<div
|
|
x-show="open"
|
|
x-transition:enter="transition ease-out duration-100"
|
|
x-transition:enter-start="opacity-0 scale-95 translate-y-1"
|
|
x-transition:enter-end="opacity-100 scale-100 translate-y-0"
|
|
x-transition:leave="transition ease-in duration-75"
|
|
x-transition:leave-start="opacity-100 scale-100 translate-y-0"
|
|
x-transition:leave-end="opacity-0 scale-95 translate-y-1"
|
|
class="absolute right-0 top-10 w-80 bg-s2 border border-white/[.06] rounded-xl shadow-xl z-50"
|
|
>
|
|
<div class="flex items-center justify-between px-4 py-3 border-b border-white/[.06]">
|
|
<span class="text-sm font-medium text-t1">Notifications</span>
|
|
@if($this->unreadCount > 0)
|
|
<button wire:click="markAllRead" class="text-xs text-blue hover:opacity-75 transition-opacity">
|
|
Mark all read
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="max-h-80 overflow-y-auto divide-y divide-white/[.04]">
|
|
@forelse($this->notifications as $n)
|
|
<div
|
|
wire:click="markRead('{{ $n->id }}')"
|
|
class="flex items-start gap-3 px-4 py-3 hover:bg-s3 transition-colors cursor-pointer {{ $n->read_at ? 'opacity-60' : '' }}"
|
|
>
|
|
<div class="w-1.5 h-1.5 rounded-full mt-1.5 flex-shrink-0 {{ $n->read_at ? 'bg-transparent' : 'bg-blue' }}"></div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm text-t1 leading-snug">{{ $n->data['message'] ?? $n->type }}</p>
|
|
<p class="text-xs text-t3 mt-0.5">{{ $n->created_at->diffForHumans() }}</p>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="px-4 py-8 text-center text-sm text-t3">No notifications</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|