144 lines
4.1 KiB
TypeScript
144 lines
4.1 KiB
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import Image from "next/image";
|
|
import { getListArticle } from "@/service/article";
|
|
import Link from "next/link";
|
|
|
|
type Article = {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
categoryName: string;
|
|
slug: string;
|
|
createdAt: string;
|
|
publishedAt: string;
|
|
createdByName: string;
|
|
customCreatorName: string;
|
|
thumbnailUrl: string;
|
|
categories: { title: string }[];
|
|
files: { fileUrl: string; file_alt: string }[];
|
|
};
|
|
|
|
export default function Development() {
|
|
const [articles, setArticles] = useState<Article[]>([]);
|
|
const [page, setPage] = useState(1);
|
|
const [totalPage, setTotalPage] = useState(1);
|
|
|
|
useEffect(() => {
|
|
initState();
|
|
}, [page]);
|
|
|
|
async function initState() {
|
|
const req = {
|
|
limit: "10",
|
|
page,
|
|
search: "",
|
|
categorySlug: "",
|
|
sort: "desc",
|
|
isPublish: true,
|
|
sortBy: "created_at",
|
|
};
|
|
|
|
try {
|
|
const res = await getListArticle(req);
|
|
setArticles(res?.data?.data || []);
|
|
setTotalPage(res?.data?.meta?.totalPage || 1);
|
|
} catch (err) {
|
|
console.error("Error fetching articles:", err);
|
|
}
|
|
}
|
|
|
|
// Format tanggal ke gaya lokal
|
|
const formatDate = (dateString: string) => {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleDateString("id-ID", {
|
|
day: "2-digit",
|
|
month: "long",
|
|
year: "numeric",
|
|
});
|
|
};
|
|
|
|
// Mapping struktur seperti dummy sebelumnya
|
|
const leftMain = articles[0];
|
|
const leftList = articles.slice(1, 4);
|
|
const centerMain = articles[4];
|
|
const centerList = articles.slice(5, 8);
|
|
const rightMain = articles[8];
|
|
const rightList = articles.slice(9, 12);
|
|
|
|
return (
|
|
<section className="max-w-7xl mx-auto px-4">
|
|
<div className="bg-white ">
|
|
<div className="mb-4">
|
|
<h2 className="text-xl font-black text-[#000]">JAGA NEGERI</h2>
|
|
|
|
<div className="w-10 h-1 bg-green-600 mt-1 rounded"></div>
|
|
</div>
|
|
|
|
<div className="border-b border-gray-300 mb-5"></div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{articles.slice(0, 6).map((item) => (
|
|
<Link
|
|
href={`/details/${item.slug}`}
|
|
key={item.id}
|
|
className="flex gap-4 pb-4 border-b border-gray-200"
|
|
>
|
|
<div className="relative w-28 h-28 rounded-md overflow-hidden flex-shrink-0">
|
|
<Image
|
|
src={item.thumbnailUrl || "/placeholder.jpg"}
|
|
alt={item.title}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col">
|
|
<p className="text-[11px] font-bold text-black">
|
|
<span className="border-b-2 border-green-600 pb-[1px]">
|
|
BERITA OPINI
|
|
</span>
|
|
</p>
|
|
|
|
<h3 className="font-semibold text-[15px] leading-tight mt-1 line-clamp-2">
|
|
{item.title}
|
|
</h3>
|
|
|
|
<p className="text-[11px] text-gray-600 mt-2">
|
|
By{" "}
|
|
<span className="font-semibold">
|
|
{item.customCreatorName}
|
|
</span>
|
|
</p>
|
|
|
|
<p className="text-[11px] text-gray-600">
|
|
{new Date(item?.publishedAt ?? item?.createdAt)
|
|
.toLocaleString("id-ID", {
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
hour12: false,
|
|
timeZone: "Asia/Jakarta",
|
|
})
|
|
.replace("pukul ", "")}{" "}
|
|
WIB
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<div className="relative h-[140px] w-full overflow-hidden rounded-none my-5">
|
|
<Image
|
|
src="/image-kolom.png"
|
|
alt="Berita Utama"
|
|
fill
|
|
className="object-fill"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|