41 lines
2.5 KiB
PHP
41 lines
2.5 KiB
PHP
@if (!empty($content) && ($content['enabled'] ?? false))
|
|
<div x-data="{ dismissed: localStorage.getItem('announcement_dismissed_{{ $content['id'] ?? 'default' }}') === 'true' }" x-show="!dismissed" x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 max-h-16" x-transition:leave-end="opacity-0 max-h-0"
|
|
class="bg-primary text-secondary-foreground overflow-hidden" id="topbar">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="relative flex items-center justify-center gap-x-3 gap-y-1 flex-wrap min-h-10 py-2 pr-8 text-sm">
|
|
@if (isset($content['badge']))
|
|
<span
|
|
class="hidden sm:inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-white/20 shrink-0">
|
|
{{ $content['badge'] }}
|
|
</span>
|
|
@endif
|
|
|
|
<span class="font-medium text-center leading-snug">
|
|
{{ $content['text'] ?? '' }}
|
|
</span>
|
|
|
|
@if (isset($content['link_text']) && isset($content['link_url']))
|
|
<a href="{{ $content['link_url'] }}"
|
|
class="inline-flex items-center gap-1 font-semibold underline underline-offset-2 decoration-white/50 hover:decoration-white transition-colors shrink-0">
|
|
{{ $content['link_text'] }}
|
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
|
|
</svg>
|
|
</a>
|
|
@endif
|
|
|
|
<button
|
|
@click="dismissed = true; localStorage.setItem('announcement_dismissed_{{ $content['id'] ?? 'default' }}', 'true')"
|
|
class="absolute right-0 top-1/2 -translate-y-1/2 p-1.5 text-white/60 hover:text-white transition-colors"
|
|
aria-label="{{ __('ui.announcement_close') }}">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|