44 lines
2.4 KiB
PHP
44 lines
2.4 KiB
PHP
@props(['article'])
|
|
|
|
<div
|
|
class="flex flex-col ring-2 ring-gray-700 overflow-hidden group relative rounded-md shadow-[0px_4px_0px_2px_#374151] hover:shadow-[0px_2px_0px_2px_#374151] hover:translate-y-1 transition ease-in-out duration-200 p-4 bg-cosmicLatte cursor-pointer bg-white/50">
|
|
<a href="{{ route('articles.detail', ['id' => $article->id]) }}" class="flex flex-col justify-between">
|
|
<div class="flex flex-col md:flex-row mb-8 space-y-4 md:space-y-0 md:space-x-6 h-full">
|
|
<img src="{{ asset('storage/' . $article->image) }}" alt="Image"
|
|
class="w-full md:w-[200px] h-auto md:h-[180px] min-w-[200px] min-h-[180px] rounded-md object-cover ring-2 ring-gray-300">
|
|
<div class="flex flex-col w-full">
|
|
<div class="mb-4 flex flex-wrap gap-3">
|
|
@forelse ($article->tags as $tag)
|
|
<span
|
|
class="text-orangeCrayola bg-orangeCrayola/15 ring-1 ring-orangeCrayola text-sm py-1 px-3 rounded">
|
|
{{ $tag->name }}
|
|
</span>
|
|
@empty
|
|
<span class="text-gray-500 text-sm py-1 px-3">Tanpa Tag</span>
|
|
@endforelse
|
|
</div>
|
|
<h3 class="text-lg md:text-xl font-semibold mb-1">{{ $article->title }}</h3>
|
|
<span class="leading-snug min-h-12 tracking-wide mb-2 text-sm md:text-base">
|
|
{{ Str::limit($article->description, 120) }}
|
|
</span>
|
|
@if ($article->subArticles && $article->subArticles->isNotEmpty())
|
|
<h4 class="text-base md:text-lg font-semibold">Sub Artikel:</h4>
|
|
<ul class="list-disc pl-5">
|
|
@foreach ($article->subArticles->take(4) as $subArticle)
|
|
<li>
|
|
<a href="{{ route('articles.detail', ['id' => $article->id]) }}#sub-article-{{ $subArticle->id }}"
|
|
class="text-gray-600 hover:underline block">
|
|
{{ $subArticle->title }}
|
|
</a>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end text-sm mt-4">
|
|
Dipublikasikan pada : {{ $article->created_at->format('d M Y') }}
|
|
</div>
|
|
</a>
|
|
</div>
|