65 lines
2.6 KiB
PHP
65 lines
2.6 KiB
PHP
<div class="mx-auto px-4 sm:px-6 lg:px-8 py-12 max-w-7xl">
|
|
{{-- Breadcrumbs --}}
|
|
<nav class="flex items-center gap-2 mb-8 text-zinc-500 text-sm">
|
|
<a href="/patient/news" class="hover:text-{{ $site->accent ?? 'emerald' }}-600">Berita</a>
|
|
<flux:icon.chevron-right class="size-3" />
|
|
<span class="truncate">{{ $news->title }}</span>
|
|
</nav>
|
|
|
|
<article>
|
|
{{-- Header --}}
|
|
<header class="mb-10 text-center">
|
|
<flux:badge color="{{ $site->accent ?? 'emerald' }}" variant="subtle" class="mb-4">
|
|
{{ $news->category->name }}
|
|
</flux:badge>
|
|
|
|
<flux:heading size="xl" class="mb-6 md:text-4xl leading-tight">
|
|
{{ $news->title }}
|
|
</flux:heading>
|
|
|
|
<div class="flex justify-center items-center gap-4 text-zinc-500">
|
|
<div class="flex items-center gap-2">
|
|
<flux:icon.calendar class="size-4" />
|
|
<span class="text-sm">{{ $news->created_at->format('d M Y') }}</span>
|
|
</div>
|
|
<div class="bg-zinc-300 rounded-full size-1"></div>
|
|
<div class="flex items-center gap-2">
|
|
<flux:icon.clock class="size-4" />
|
|
<span class="text-sm">{{ $news->read_time ?? '5' }} Menit Baca</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{{-- Featured Image --}}
|
|
@if($news->image)
|
|
<div class="shadow-xl mb-12 rounded-3xl overflow-hidden">
|
|
<img src="{{ Storage::url($news->image) }}"
|
|
alt="{{ $news->title }}"
|
|
class="w-full h-auto max-h-[500px] object-cover">
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Content --}}
|
|
<div class="prose prose-zinc dark:prose-invert lg:prose-xl mx-auto
|
|
prose-img:rounded-2xl prose-headings:text-{{ $site->accent ?? 'emerald' }}-950
|
|
dark:prose-headings:text-white">
|
|
{!! $news->content !!}
|
|
</div>
|
|
|
|
{{-- Footer/Share --}}
|
|
<div class="flex justify-between items-center mt-16 pt-8 border-zinc-200 dark:border-zinc-800 border-t">
|
|
<flux:button href="/patient/news" variant="ghost" icon="arrow-left">
|
|
Kembali ke Daftar
|
|
</flux:button>
|
|
|
|
<div class="flex gap-2">
|
|
{{-- Tombol Share Sederhana --}}
|
|
<flux:button icon="share" variant="subtle" size="sm"
|
|
x-on:click="navigator.clipboard.writeText(window.location.href); alert('Link disalin!')">
|
|
Salin Link
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|