99 lines
5.3 KiB
PHP
99 lines
5.3 KiB
PHP
@extends('layouts.home')
|
|
|
|
@section('title', 'Semua Artikel')
|
|
|
|
@section('content')
|
|
<section class="flex flex-col min-h-screen mb-12">
|
|
<div class="w-full fixed top-0 z-50 bg-cosmicLatte shadow-md">
|
|
<nav class="flex justify-between py-4 px-6 md:px-14 items-center border-b-2 border-gray-700">
|
|
<div>
|
|
<a href="{{ url('/') }}" wire:navigate>
|
|
<img src="{{ asset('images/logo.svg') }}" alt="logo" class="hidden sm:block" />
|
|
</a>
|
|
</div>
|
|
<form action="{{ route('cards') }}" method="GET" class="mb-0 flex space-x-4 w-full sm:w-auto">
|
|
<x-search-input name="search" placeholder="Cari artikel..." value="{{ request()->get('search') }}" />
|
|
</form>
|
|
</nav>
|
|
</div>
|
|
<div class="flex flex-col px-6 md:px-14 pt-28">
|
|
<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('cards') }}" 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 aria-current="page" class="text-gray-500 font-normal">
|
|
@if (isset($card))
|
|
{{ $card->title }}
|
|
@else
|
|
Card tidak ditemukan
|
|
@endif
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
@if (isset($card))
|
|
<div class="flex flex-col md:flex-row md:space-x-8 mb-9">
|
|
<img src="{{ asset('storage/' . $card->image) }}" alt="{{ $card->title }}"
|
|
class="w-full md:w-[450px] min-w-[320px] h-[200px] md:h-[300px] rounded-md ring-2 ring-gray-300 object-cover md:mb-0 mb-4">
|
|
<div class="flex flex-col mb-7">
|
|
<h2 class="text-2xl md:text-4xl font-semibold mb-3">{{ $card->title }}</h2>
|
|
<p class="text-base md:text-lg mb-7 leading-relaxed tracking-wide">{{ $card->description }}</p>
|
|
<div class="flex flex-col sm:flex-row w-full mb-4 space-y-2 sm:space-y-0 sm:space-x-11">
|
|
<div class="flex space-x-2 items-center">
|
|
<i class="fa-solid fa-receipt text-xl md:text-2xl text-gray-600"></i>
|
|
<span class="text-sm md:text-base">{{ $card->articles->count() }} Artikel</span>
|
|
</div>
|
|
<div class="flex space-x-2 items-center">
|
|
<i class="fa-solid fa-clock text-xl md:text-2xl text-gray-600"></i>
|
|
<span class="text-sm md:text-base">{{ $card->readingTime }} Menit</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="text-center py-12">
|
|
<p class="text-gray-500 text-xl">Card artikel tidak ditemukan.</p>
|
|
</div>
|
|
@endif
|
|
<div class="flex flex-col w-full">
|
|
<h2 class="text-2xl md:text-3xl font-semibold mb-4">Semua Artikel</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
|
|
@if (isset($articles) && $articles->isNotEmpty())
|
|
@foreach ($articles as $article)
|
|
<x-card-article :article="$article" />
|
|
@endforeach
|
|
@else
|
|
<p class="text-gray-500">Belum ada artikel.</p>
|
|
@endif
|
|
</div>
|
|
<div class="flex justify-center mt-6">
|
|
<div class="w-full max-w-md">
|
|
{{ $articles->links() }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="fixed bottom-6 right-6">
|
|
<a href="{{ url('/') }}" wire:navigate>
|
|
<x-primary-button
|
|
class="hidden sm:inline-block ring-2 ring-gray-700 shadow-[4px_4px_0px_2px_#374151] text-white hover:shadow-[2px_2px_0px_2px_#374151] hover:translate-y-0.5 hover:translate-x-0.5 text-center bg-orangeCrayola py-2.5">
|
|
Kembali ke Beranda
|
|
</x-primary-button>
|
|
<x-primary-button
|
|
class="sm:hidden inline-block ring-2 ring-gray-700 shadow-[4px_4px_0px_2px_#374151] text-white hover:shadow-[2px_2px_0px_2px_#374151] hover:translate-y-0.5 hover:translate-x-0.5 text-center bg-orangeCrayola py-2.5 text-sm">
|
|
Beranda
|
|
</x-primary-button>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
@endsection
|