83 lines
3.5 KiB
TypeScript
83 lines
3.5 KiB
TypeScript
import React from "react";
|
|
import { Link } from "@inertiajs/react";
|
|
|
|
import { DetailArtikelProps } from "./types";
|
|
|
|
export default function DetailArtikel({
|
|
article,
|
|
relatedArticles,
|
|
}: DetailArtikelProps) {
|
|
const getRouteByCategory = (kategori: string, slug: string) => {
|
|
const routes: { [key: string]: string } = {
|
|
Pengumuman: `/pengumuman/${slug}`,
|
|
Peraturan: `/peraturan/${slug}`,
|
|
Undangan: `/undangan/${slug}`,
|
|
};
|
|
|
|
return routes[kategori] || `/sekilasinfo/${slug}`;
|
|
};
|
|
|
|
return (
|
|
<div className="container flex flex-col md:flex-row gap-8 p-4 max-w-6xl mx-auto">
|
|
<div className="w-full md:w-7/12">
|
|
<div className="mb-4 flex flex-row gap-5 items-center">
|
|
<span className="bg-red-500 text-white px-2 py-1 text-sm rounded">
|
|
{article.kategori?.NamaKategori}
|
|
</span>
|
|
<div className="text-gray-500 text-sm ">
|
|
{new Date(article.created_at).toLocaleDateString(
|
|
"id-ID",
|
|
{
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
}
|
|
)}
|
|
</div>
|
|
</div>
|
|
<h1 className="text-2xl font-bold mb-6">{article.JudulPost}</h1>
|
|
<img
|
|
src={`/storage/${article.ImagePost}`}
|
|
alt={article.JudulPost}
|
|
className="w-full h-auto rounded-lg mb-6"
|
|
/>
|
|
<div
|
|
className="text-justify prose prose-lg max-w-none"
|
|
dangerouslySetInnerHTML={{ __html: article.DescPost }}
|
|
/>
|
|
</div>
|
|
<div className="w-full md:w-5/12">
|
|
<h1 className="text-xl font-bold mb-6">Informasi Lainnya</h1>
|
|
<div className="flex flex-col gap-6">
|
|
{relatedArticles.slice(0, 5).map((related) => (
|
|
<Link
|
|
key={related.PostId}
|
|
href={getRouteByCategory(
|
|
related.kategori?.NamaKategori || "",
|
|
related.SlugPost
|
|
)}
|
|
className="group"
|
|
>
|
|
<div className="flex flex-row gap-4">
|
|
<img
|
|
src={`/storage/${related.ImagePost}`}
|
|
alt={related.JudulPost}
|
|
className="w-24 h-24 object-cover rounded-lg"
|
|
/>
|
|
<div className="flex flex-col">
|
|
<span className="bg-red-500 text-white px-2 py-1 text-sm rounded w-fit">
|
|
{related.kategori?.NamaKategori}
|
|
</span>
|
|
<p className="font-medium group-hover:text-red-600 transition-colors mt-2">
|
|
{related.JudulPost}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|