80 lines
4.0 KiB
PHP
80 lines
4.0 KiB
PHP
<div class="mx-auto">
|
|
|
|
<div class="flex md:flex-row flex-col justify-between md:items-center gap-6 mb-12">
|
|
<div>
|
|
<flux:heading size="xl" class="mb-2">Berita & Artikel Kesehatan</flux:heading>
|
|
<flux:subheading>Dapatkan informasi kesehatan terpercaya dari tim dokter kami.</flux:subheading>
|
|
</div>
|
|
|
|
<div class="w-full md:w-80">
|
|
<flux:input
|
|
wire:model.live.debounce.300ms="search"
|
|
type="search"
|
|
placeholder="Cari artikel..."
|
|
icon="magnifying-glass"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
@if($news->count() > 0)
|
|
<div class="gap-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
|
|
@foreach($news as $item)
|
|
<article class="group flex flex-col bg-white dark:bg-zinc-900 shadow-sm hover:shadow-xl border border-zinc-200 dark:border-zinc-800 rounded-3xl overflow-hidden transition-all duration-300">
|
|
|
|
<div class="relative aspect-[16/9] overflow-hidden">
|
|
@if($item->image)
|
|
<img src="{{ Storage::url($item->image) }}" alt="{{ $item->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
|
@else
|
|
<div class="w-full h-full bg-{{ $site->accent ?? 'emerald' }}-100 dark:bg-{{ $site->accent ?? 'emerald' }}-900/30 flex items-center justify-center">
|
|
<flux:icon.newspaper class="size-12 text-{{ $site->accent ?? 'emerald' }}-600" />
|
|
</div>
|
|
@endif
|
|
|
|
<div class="top-4 left-4 absolute">
|
|
<flux:badge color="zinc" class="bg-white/90 dark:bg-zinc-900/90 shadow-sm backdrop-blur-md border-none">
|
|
{{ $item->category->name }}
|
|
</flux:badge>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col flex-1 p-6">
|
|
<div class="flex items-center gap-2 mb-3 text-zinc-500 text-xs">
|
|
<span>{{ $item->created_at->format('d M Y') }}</span>
|
|
<span class="bg-zinc-300 rounded-full size-1"></span>
|
|
<span>{{ $item->read_time ?? '5' }} mnt baca</span>
|
|
</div>
|
|
|
|
<flux:heading size="lg" class="mb-3 group-hover:text-{{ $site->accent ?? 'emerald' }}-600 transition-colors">
|
|
<a href="/news/{{ $item->slug }}" class="focus:outline-none">
|
|
{{ $item->title }}
|
|
</a>
|
|
</flux:heading>
|
|
|
|
<p class="mb-6 text-zinc-600 dark:text-zinc-400 text-sm line-clamp-3">
|
|
{{ Str::limit(strip_tags($item->content), 120) }}
|
|
</p>
|
|
|
|
<div class="mt-auto pt-4 border-zinc-100 dark:border-zinc-800 border-t">
|
|
<flux:button href="/patient/news/{{ $item->slug }}" variant="ghost" size="sm" icon-trailing="chevron-right" class="font-semibold text-{{ $site->accent ?? 'emerald' }}-600 p-0 hover:bg-transparent">
|
|
Baca Selengkapnya
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="mt-12">
|
|
{{ $news->links() }}
|
|
</div>
|
|
@else
|
|
<div class="py-20 text-center">
|
|
<div class="inline-flex justify-center items-center bg-zinc-100 dark:bg-zinc-800 mb-4 rounded-full size-16">
|
|
<flux:icon.magnifying-glass class="size-8 text-zinc-400" />
|
|
</div>
|
|
<flux:heading>Berita tidak ditemukan</flux:heading>
|
|
<flux:subheading>Coba kata kunci lain atau periksa kategori yang berbeda.</flux:subheading>
|
|
</div>
|
|
@endif
|
|
</div>
|