27 lines
1.6 KiB
PHP
27 lines
1.6 KiB
PHP
|
<x-layouts::home>
|
||
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||
|
|
<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>
|
||
|
|
<div class="prose text-gray-500 text-base mb-6">
|
||
|
|
{!! nl2br($post->content) !!}
|
||
|
|
</div>
|
||
|
|
<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>
|
||
|
|
</main>
|
||
|
|
</x-layouts::home>
|