58 lines
2.6 KiB
PHP
58 lines
2.6 KiB
PHP
<div class="space-y-12 py-12">
|
|
{{-- Header Berita --}}
|
|
<div class="space-y-4 mx-auto max-w-2xl text-center">
|
|
<flux:heading level="1">Berita & Edukasi Kesehatan</flux:heading>
|
|
<flux:subheading>Informasi terbaru, tips sehat, dan update layanan dari {{ $site->name }}</flux:subheading>
|
|
</div>
|
|
|
|
{{-- Grid Berita --}}
|
|
<div class="gap-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
|
|
{{-- Nanti di-loop dari database --}}
|
|
@forelse($news as $item)
|
|
<flux:card class="group hover:shadow-xl p-0 overflow-hidden transition-all duration-300 cursor-pointer">
|
|
<div class="bg-zinc-100 w-full aspect-video overflow-hidden">
|
|
{{-- Placeholder Image jika belum ada --}}
|
|
<img src="{{ $item->image_url ?? 'https://placehold.co/600x400/f4f4f5/10b981?text=Klinik+News' }}"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
|
</div>
|
|
|
|
<div class="space-y-3 p-6">
|
|
<div class="flex items-center gap-2 text-zinc-500 text-xs">
|
|
<flux:badge color="{{ $site->accent }}" variant="flat" size="sm">
|
|
{{ $item->category->name ?? 'Uncategorized' }}
|
|
</flux:badge>
|
|
<span>{{ $item->created_at->format('d M Y') }}</span>
|
|
</div>
|
|
|
|
<flux:heading class="group-hover:text-{{ $site->accent }}-600 transition-colors">
|
|
{{ $item->title }}
|
|
</flux:heading>
|
|
|
|
<p class="text-zinc-500 text-sm line-clamp-3 leading-relaxed">
|
|
{{ Str::limit(strip_tags($item->content), 120) }}
|
|
</p>
|
|
|
|
<div class="pt-2">
|
|
<flux:button href="{{ route('news.show', $item->slug) }}" variant="ghost" size="sm"
|
|
icon-trailing="arrow-right">
|
|
Baca Selengkapnya
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
</flux:card>
|
|
@empty
|
|
{{-- Tampilan jika belum ada berita --}}
|
|
<div class="col-span-full py-20 text-center">
|
|
<flux:icon.newspaper class="mx-auto mb-4 size-12 text-zinc-300" />
|
|
<flux:heading>Belum ada berita</flux:heading>
|
|
<flux:subheading>Nantikan informasi menarik dari kami segera.</flux:subheading>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
{{-- Pagination --}}
|
|
<div class="mt-8">
|
|
{{ $news->links() }}
|
|
</div>
|
|
</div>
|