88 lines
4.3 KiB
PHP
88 lines
4.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<title>@yield('title', config('app.name', 'Artikel Detail'))</title>
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
</head>
|
|
|
|
<body class="antialiased p-6">
|
|
<section class="max-w-5xl mx-auto p-6 bg-white/80 rounded-lg shadow-lg ring-2 ring-gray-300">
|
|
<div class="flex">
|
|
<nav class="text-sm text-gray-600 mb-4 font-medium" aria-label="Breadcrumb">
|
|
<ol class="inline-flex items-center space-x-1 md:space-x-3">
|
|
<li class="inline-flex items-center">
|
|
<a href="{{ route('cardss') }}" wire:navigate
|
|
class="text-gray-500 hover:text-gray-700 inline-flex items-center ease-in-out duration-300 hover:underline">
|
|
Grup Artikel
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none"
|
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</li>
|
|
<li class="inline-flex items-center">
|
|
<a href="{{ route('cards.articles', ['id' => $article->cardArticle->id]) }}"
|
|
class="text-gray-500 hover:text-gray-700 ease-in-out duration-300 hover:underline">
|
|
Artikel
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none"
|
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</li>
|
|
<li aria-current="page" class="text-gray-500 font-normal">{{ $article->title }}</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
<h1 class="text-2xl md:text-4xl font-bold text-gray-500 leading-tight mb-4">
|
|
{{ $article->title }}
|
|
</h1>
|
|
@if ($article->image)
|
|
<img src="{{ asset('storage/' . $article->image) }}" alt="Image"
|
|
class="object-cover rounded-lg shadow-md mb-2 mx-auto max-h-[400px] min-h-[380px] w-full">
|
|
@else
|
|
No Image
|
|
@endif
|
|
<div class="flex items-center text-sm md:text-base text-gray-500 mb-6 space-x-2">
|
|
<i class="fa-regular fa-calendar text-lg"></i>
|
|
<span>Dipublikasikan pada: {{ $article->created_at->format('d M Y') }}</span>
|
|
</div>
|
|
<div class="prose prose-sm md:prose-lg text-gray-700 leading-relaxed mb-8 tracking-wide">
|
|
{{ $article->description }}
|
|
</div>
|
|
@if ($article->subArticles->count() > 0)
|
|
<div class="border-t border-gray-300 pt-6">
|
|
<div class="space-y-6">
|
|
@foreach ($article->subArticles as $subArticle)
|
|
<div id="sub-article-{{ $subArticle->id }}"
|
|
class="p-4 bg-gray-100 rounded-lg shadow-sm transition">
|
|
<h3 class="text-lg md:text-xl font-semibold text-gray-700 mb-2">{{ $subArticle->title }}
|
|
</h3>
|
|
<p class="text-sm md:text-base text-gray-600 leading-relaxed tracking-wide mb-2">
|
|
{{ $subArticle->content }}
|
|
</p>
|
|
@if ($subArticle->image)
|
|
<img src="{{ asset('storage/' . $subArticle->image) }}" alt="Image"
|
|
class="object-cover rounded mx-auto max-h-[400px] min-h-[380px] w-full">
|
|
@else
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@else
|
|
<p class="text-gray-500 mt-6">Tidak ada sub-artikel untuk artikel ini.</p>
|
|
@endif
|
|
</section>
|
|
</body>
|
|
|
|
</html>
|