39 lines
1.8 KiB
PHP
39 lines
1.8 KiB
PHP
@props([
|
|
'article',
|
|
])
|
|
|
|
<article class="card card-hover overflow-hidden group cursor-pointer">
|
|
<div class="relative h-48 overflow-hidden bg-zinc-100 dark:bg-zinc-800">
|
|
<img src="{{ $article['image'] }}" alt="{{ $article['title'] }}"
|
|
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
|
<div class="absolute top-3 left-3">
|
|
<span class="badge badge-{{ $article['badgeType'] ?? 'primary' }} shadow-md text-xs">
|
|
{{ $article['badge'] }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="flex items-center gap-2 text-xs text-zinc-600 dark:text-zinc-400 mb-3">
|
|
<span class="badge badge-{{ $article['categoryBadgeType'] ?? 'secondary' }} text-xs">
|
|
{{ $article['category'] }}
|
|
</span>
|
|
<span>•</span>
|
|
<time datetime="{{ $article['date'] }}">{{ $article['dateFormatted'] }}</time>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-zinc-900 dark:text-zinc-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors line-clamp-2">
|
|
{{ $article['title'] }}
|
|
</h3>
|
|
<p class="text-sm text-zinc-700 dark:text-zinc-300 line-clamp-3 mb-4">
|
|
{{ $article['teaser'] }}
|
|
</p>
|
|
@if(isset($article['author']))
|
|
<div class="flex items-center gap-2 text-xs">
|
|
<div class="w-6 h-6 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] flex items-center justify-center text-white font-semibold text-[10px]">
|
|
{{ $article['authorInitials'] }}
|
|
</div>
|
|
<span class="text-zinc-600 dark:text-zinc-400">{{ $article['author'] }}</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</article>
|
|
|