39 lines
1.7 KiB
PHP
39 lines
1.7 KiB
PHP
|
<?php
|
||
|
|
|
||
|
|
use App\Models\Post;
|
||
|
|
use Livewire\Component;
|
||
|
|
|
||
|
|
new class extends Component {
|
||
|
|
public Post $post;
|
||
|
|
|
||
|
|
public $images = [
|
||
|
|
'2' => 'https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&q=80&w=800',
|
||
|
|
'3' => 'https://images.unsplash.com/photo-1667372393119-3d4c48d07fc9?auto=format&fit=crop&q=80&w=800',
|
||
|
|
'4' => 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&q=80&w=800',
|
||
|
|
];
|
||
|
|
};
|
||
|
|
?>
|
||
|
|
|
||
|
|
<article class="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition group border border-gray-100">
|
||
|
|
<div class="aspect-video overflow-hidden">
|
||
|
|
<img src="{{ $images[$post->id] }}" class="object-cover w-full h-full group-hover:scale-105 transition duration-500" alt="Article">
|
||
|
|
</div>
|
||
|
|
<div class="p-6">
|
||
|
|
<div class="flex items-center text-xs font-semibold text-{{ $post->category->color }}-600 mb-3 space-x-2">
|
||
|
|
<span>{{ $post->category->name }}</span>
|
||
|
|
<span class="text-gray-300">•</span>
|
||
|
|
<span class="text-gray-500">{{ $post->avg_reading_time }} min read</span>
|
||
|
|
</div>
|
||
|
|
<a href="{{ route('post.show', $post->id) }}" class="text-xl font-bold text-gray-900 mb-3 line-clamp-2 hover:text-indigo-600 transition cursor-pointer">
|
||
|
|
{{ $post->title }}
|
||
|
|
</a>
|
||
|
|
<p class="text-gray-500 text-sm mb-6 line-clamp-3">
|
||
|
|
{{ $post->excerpt }}
|
||
|
|
</p>
|
||
|
|
<div class="flex items-center space-x-3">
|
||
|
|
<img class="h-8 w-8 rounded-full" src="https://ui-avatars.com/api/?name={{ $post->author->name }}&background=E0E7FF&color=4338CA" alt="Author">
|
||
|
|
<span class="text-xs font-medium text-gray-700">{{ $post->author->name }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</article>
|