39 lines
2.0 KiB
PHP
39 lines
2.0 KiB
PHP
@props(['story'])
|
|
|
|
<a href="{{ route('stories.show', $story->slug) }}"
|
|
class="group block overflow-hidden rounded-xl border border-gray-700 bg-gray-800/70 shadow-lg transition-transform duration-200 hover:scale-[1.02] hover:border-sky-500/40">
|
|
@if($story->cover_url)
|
|
<div class="aspect-video overflow-hidden bg-gray-900">
|
|
<img src="{{ $story->cover_url }}" alt="{{ $story->title }}" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" loading="lazy" />
|
|
</div>
|
|
@else
|
|
<div class="aspect-video bg-gradient-to-br from-gray-900 via-slate-900 to-sky-950"></div>
|
|
@endif
|
|
|
|
<div class="space-y-3 p-4">
|
|
<h3 class="line-clamp-2 text-lg font-bold text-white">{{ $story->title }}</h3>
|
|
|
|
<div class="flex items-center gap-2 text-sm text-gray-300">
|
|
<img
|
|
src="{{ $story->creator?->profile?->avatar_hash ? \App\Support\AvatarUrl::forUser((int) $story->creator->id, $story->creator->profile->avatar_hash, 48) : \App\Support\AvatarUrl::default() }}"
|
|
alt="{{ $story->creator?->username ?? 'Creator' }}"
|
|
class="h-6 w-6 rounded-full border border-gray-600 object-cover"
|
|
/>
|
|
<span>{{ $story->creator?->username ?? 'Unknown creator' }}</span>
|
|
@if($story->published_at)
|
|
<span class="text-gray-500">•</span>
|
|
<time datetime="{{ $story->published_at->toIso8601String() }}" class="text-gray-400">
|
|
{{ $story->published_at->format('M j, Y') }}
|
|
</time>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3 text-xs text-gray-400">
|
|
<span>{{ $story->reading_time }} min read</span>
|
|
<span>{{ number_format((int) $story->likes_count) }} likes</span>
|
|
<span>{{ number_format((int) $story->comments_count) }} comments</span>
|
|
<span>{{ number_format((int) $story->views) }} views</span>
|
|
</div>
|
|
</div>
|
|
</a>
|