68 lines
3.0 KiB
PHP
68 lines
3.0 KiB
PHP
<div class="mx-auto px-6 py-12 max-w-3xl">
|
|
{{-- Tombol Kembali --}}
|
|
<div class="mb-8">
|
|
<flux:button href="{{ route('news.index') }}" variant="ghost" size="sm" icon="arrow-left">
|
|
Kembali ke Berita
|
|
</flux:button>
|
|
</div>
|
|
|
|
{{-- Header Berita --}}
|
|
<header class="space-y-4 mb-10">
|
|
<div class="flex items-center gap-3">
|
|
<flux:badge color="{{ $site->accent }}" variant="flat" size="sm">
|
|
{{ $news->category->name ?? 'Uncategorized' }}
|
|
</flux:badge>
|
|
<span class="text-zinc-400 text-sm italic">{{ $news->created_at->format('d M Y') }}</span>
|
|
</div>
|
|
|
|
<flux:heading size="xl" level="1" class="leading-tight">
|
|
{{ $news->title }}
|
|
</flux:heading>
|
|
|
|
<div class="flex items-center gap-2 pt-2 pt-4 border-zinc-100 dark:border-white/5 border-t">
|
|
<div class="flex justify-center items-center bg-zinc-200 rounded-full size-8">
|
|
<flux:icon.user variant="mini" class="text-zinc-500" />
|
|
</div>
|
|
<div class="text-sm">
|
|
<p class="font-semibold text-zinc-800 dark:text-zinc-200">Admin Klinik</p>
|
|
<p class="text-zinc-500 text-xs">{{ $news->view_count }}x dibaca</p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{{-- Gambar Utama --}}
|
|
@if ($news->image)
|
|
<div class="shadow-xl mb-10 rounded-3xl overflow-hidden">
|
|
<img src="{{ asset('storage/' . $news->image) }}" alt="{{ $news->title }}" class="w-full h-auto">
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Konten Berita --}}
|
|
{{-- Class 'prose' sangat penting agar styling HTML dari editor (bold, list, h2) muncul --}}
|
|
<article
|
|
class="prose prose-zinc lg:prose-lg dark:prose-invert max-w-none prose-img:rounded-xl prose-headings:text-{{ $site->accent }}-700">
|
|
{!! $news->content !!}
|
|
</article>
|
|
|
|
{{-- Footer Berita / Share --}}
|
|
<footer class="mt-16 pt-8 border-zinc-100 dark:border-white/5 border-t">
|
|
<div
|
|
class="bg-{{ $site->accent }}-50 dark:bg-{{ $site->accent }}-900/10 p-8 rounded-3xl flex flex-col md:flex-row justify-between items-center gap-6 text-center md:text-left">
|
|
<div>
|
|
<flux:heading size="lg">Bagikan Informasi Ini</flux:heading>
|
|
<flux:subheading>Bantu orang lain mendapatkan edukasi kesehatan yang tepat.</flux:subheading>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<flux:button href="https://wa.me/?text={{ urlencode($news->title . ' - ' . url()->current()) }}"
|
|
target="_blank" variant="primary" class="bg-[#25D366] hover:bg-[#20ba5a] border-none text-white">
|
|
WhatsApp
|
|
</flux:button>
|
|
<flux:button icon="link" variant="outline"
|
|
x-on:click="navigator.clipboard.writeText(window.location.href); alert('Link disalin!')">
|
|
Salin Link
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|