94 lines
7.1 KiB
PHP
94 lines
7.1 KiB
PHP
<div class="space-y-6">
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<h1 class="text-2xl font-semibold tracking-tight text-gray-900">Notifications</h1>
|
|
<p class="mt-1 text-sm text-gray-500">{{ $subtitle ?? 'Stay updated on your account activity.' }}</p>
|
|
</div>
|
|
@if ($notifications->where('read_at', null)->count() > 0)
|
|
<form method="POST" action="{{ route('notifications.mark-all-read') }}">
|
|
@csrf
|
|
<button type="submit" class="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3.5 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-50">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
|
|
Mark all as read
|
|
</button>
|
|
</form>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-gray-200 bg-white">
|
|
@forelse ($notifications as $notification)
|
|
@php
|
|
$data = $notification->data;
|
|
$icon = $data['icon'] ?? 'bell';
|
|
$iconBg = match ($icon) {
|
|
'domain' => 'bg-emerald-50',
|
|
'hosting' => 'bg-violet-50',
|
|
'email' => 'bg-pink-50',
|
|
'billing' => 'bg-amber-50',
|
|
'success' => 'bg-green-50',
|
|
default => 'bg-slate-100',
|
|
};
|
|
$iconColor = match ($icon) {
|
|
'domain' => 'text-emerald-600',
|
|
'hosting' => 'text-violet-600',
|
|
'email' => 'text-pink-600',
|
|
'billing' => 'text-amber-600',
|
|
'success' => 'text-green-600',
|
|
default => 'text-slate-500',
|
|
};
|
|
@endphp
|
|
<div class="flex items-start gap-4 border-b border-gray-100 px-5 py-4 last:border-b-0 {{ $notification->read_at ? 'bg-white' : 'bg-indigo-50/30' }}">
|
|
<span class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-full {{ $iconBg }}">
|
|
@if ($icon === 'domain' && view()->exists('components.icons.domain-globe'))
|
|
@include('components.icons.domain-globe', ['class' => 'h-5 w-5 ' . $iconColor])
|
|
@elseif ($icon === 'email')
|
|
<svg class="h-5 w-5 {{ $iconColor }}" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"/></svg>
|
|
@elseif ($icon === 'hosting')
|
|
<svg class="h-5 w-5 {{ $iconColor }}" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z"/></svg>
|
|
@elseif ($icon === 'billing')
|
|
<svg class="h-5 w-5 {{ $iconColor }}" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z"/></svg>
|
|
@elseif ($icon === 'success')
|
|
<svg class="h-5 w-5 {{ $iconColor }}" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
|
|
@else
|
|
<svg class="h-5 w-5 {{ $iconColor }}" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><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 1 0-12 0v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.08 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>
|
|
@endif
|
|
</span>
|
|
<div class="min-w-0 flex-1">
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-900">{{ $data['title'] ?? 'Notification' }}</p>
|
|
<p class="mt-0.5 text-sm text-gray-600">{{ $data['message'] ?? '' }}</p>
|
|
</div>
|
|
<span class="shrink-0 text-xs text-gray-400">{{ $notification->created_at->diffForHumans() }}</span>
|
|
</div>
|
|
@if (! empty($data['url']))
|
|
<a href="{{ $data['url'] }}" class="mt-2 inline-flex text-sm font-medium text-indigo-600 hover:text-indigo-700">
|
|
View details →
|
|
</a>
|
|
@endif
|
|
</div>
|
|
@if (! $notification->read_at)
|
|
<form method="POST" action="{{ route('notifications.mark-read', $notification->id) }}" class="shrink-0">
|
|
@csrf
|
|
<button type="submit" class="rounded-lg p-1.5 text-gray-400 transition hover:bg-gray-100 hover:text-gray-600" title="Mark as read">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>
|
|
</button>
|
|
</form>
|
|
@endif
|
|
</div>
|
|
@empty
|
|
<div class="px-5 py-16 text-center">
|
|
<svg class="mx-auto h-12 w-12 text-gray-300" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
|
<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 1 0-12 0v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.08 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>
|
|
<h3 class="mt-4 text-sm font-medium text-gray-900">No notifications</h3>
|
|
<p class="mt-1 text-sm text-gray-500">{{ $emptyMessage ?? "You're all caught up." }}</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
@if ($notifications->hasPages())
|
|
<div class="mt-4">{{ $notifications->links() }}</div>
|
|
@endif
|
|
</div>
|