homeos/resources/views/livewire/modals/warnings.blade.php

58 lines
2.8 KiB
PHP

<div class="flex flex-col">
<header class="flex items-center gap-3 px-5 py-4 border-b border-line-soft">
<span class="grid place-items-center w-9 h-9 rounded-lg bg-warning/10 text-warning shrink-0">
<x-icon name="alert" :size="18" />
</span>
<h2 class="text-[15px] font-bold text-ink flex items-center gap-2">
{{ __('dashboard.warnings_title') }}
@if (count($warnings) > 0)
<x-badge variant="warning">{{ count($warnings) }}</x-badge>
@endif
</h2>
<button type="button" wire:click="closeModal"
class="ml-auto grid place-items-center w-9 h-9 rounded-lg text-ink-3 hover:bg-raised hover:text-ink transition-colors"
aria-label="{{ __('common.close') }}">
<x-icon name="close" :size="18" />
</button>
</header>
<div class="p-4 max-h-[60vh] overflow-y-auto">
@if (count($warnings) > 0)
<div class="flex flex-col gap-2">
@foreach ($warnings as $w)
<div class="flex items-center gap-3 rounded-lg border border-line-soft bg-raised px-3 py-2.5">
<span @class([
'grid place-items-center w-8 h-8 rounded-lg shrink-0',
'text-offline bg-offline/10' => $w['level'] === 'offline',
'text-warning bg-warning/10' => $w['level'] !== 'offline',
])>
<x-icon :name="$w['icon']" :size="16" />
</span>
<div class="min-w-0">
<div class="text-[13px] font-semibold text-ink truncate">{{ $w['title'] }}</div>
@if ($w['meta'])
<div class="text-[11.5px] text-ink-3">{{ $w['meta'] }}</div>
@endif
</div>
@if ($w['link'])
<a href="{{ $w['link'] }}" wire:navigate class="ml-auto shrink-0 text-ink-3 hover:text-ink transition-colors">
<x-icon name="chevron" :size="16" />
</a>
@endif
</div>
@endforeach
</div>
@else
<div class="flex items-center gap-3 px-1 py-3 text-ink-2">
<span class="grid place-items-center w-9 h-9 rounded-lg bg-online/10 text-online shrink-0">
<x-icon name="check" :size="18" />
</span>
<div>
<div class="text-[13px] font-semibold text-ink">{{ __('dashboard.all_clear_title') }}</div>
<div class="text-[12px] text-ink-3">{{ __('dashboard.all_clear_body') }}</div>
</div>
</div>
@endif
</div>
</div>