135 lines
4.0 KiB
TypeScript
135 lines
4.0 KiB
TypeScript
"use client";
|
|
import { useState, useEffect } from "react";
|
|
import Image from "next/image";
|
|
import { getListArticle } from "@/service/article";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
type Article = {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
categoryName: string;
|
|
createdAt: string;
|
|
createdByName: string;
|
|
thumbnailUrl: string;
|
|
categories: { title: string }[];
|
|
files: { fileUrl: string; file_alt: string }[];
|
|
};
|
|
|
|
export default function LatestNews() {
|
|
const [articles, setArticles] = useState<Article[]>([]);
|
|
const [showData, setShowData] = useState("5");
|
|
const pathname = usePathname();
|
|
const currentSlug = pathname.split("/")[2] || "";
|
|
|
|
useEffect(() => {
|
|
fetchArticles();
|
|
}, []);
|
|
|
|
async function fetchArticles() {
|
|
try {
|
|
const req = {
|
|
limit: showData,
|
|
page: 1,
|
|
search: "",
|
|
categorySlug: "",
|
|
sort: "desc",
|
|
isPublish: true,
|
|
sortBy: "created_at",
|
|
};
|
|
|
|
const res = await getListArticle(req);
|
|
setArticles(res?.data?.data || []);
|
|
} catch (error) {
|
|
console.error("Gagal memuat artikel:", error);
|
|
}
|
|
}
|
|
|
|
const mainArticle = articles[0];
|
|
const secondArticle = articles[1];
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 py-10 grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div className="lg:col-span-2">
|
|
<h1 className="text-3xl font-bold mb-2">
|
|
{" "}
|
|
{currentSlug ? ` ${currentSlug}` : "Berita Terkini"}
|
|
</h1>
|
|
<p className="text-gray-600 mb-6">
|
|
Kolom ini berisi berita-berita yang saat ini sedang menjadi sorotan
|
|
atau terkait dengan peristiwa terbaru.
|
|
</p>
|
|
|
|
{articles.slice(0, 5).map((article, index) => (
|
|
<Link
|
|
key={article.id}
|
|
href={`/detail/${article.id}`}
|
|
className={`grid grid-cols-1 md:grid-cols-2 gap-4 mb-6 items-center`}
|
|
>
|
|
{/* Gambar */}
|
|
<div className={`relative ${index === 0 ? "h-64" : "h-64"} w-full`}>
|
|
<Image
|
|
src={article.thumbnailUrl}
|
|
alt={article.title}
|
|
fill
|
|
className="object-cover rounded"
|
|
/>
|
|
</div>
|
|
|
|
{/* Konten */}
|
|
<div className="flex flex-col justify-center">
|
|
<span className="bg-yellow-500 text-white px-2 py-1 text-xs font-semibold w-fit mb-2">
|
|
BERITA TERKINI
|
|
</span>
|
|
<h2 className="text-xl font-bold hover:text-red-500 mb-2">
|
|
{article.title}
|
|
</h2>
|
|
<p className="text-xs text-gray-500 mb-2">
|
|
by {article.createdByName} • {formatDate(article.createdAt)} •
|
|
💬 0
|
|
</p>
|
|
<p className="text-sm text-gray-700 mb-3 line-clamp-3">
|
|
{article.description}
|
|
</p>
|
|
<button className="bg-black text-white text-xs px-4 py-2 w-fit hover:bg-gray-800">
|
|
READ MORE
|
|
</button>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* KANAN: Advertisement */}
|
|
<div className="w-full">
|
|
<div className="border p-4 bg-white flex flex-col items-center">
|
|
<p className="text-center text-sm text-gray-600 mb-2">
|
|
Smart & Responsive
|
|
</p>
|
|
<h3 className="text-center text-md font-bold mb-4">ADVERTISEMENT</h3>
|
|
<div className="relative w-full h-[300px] bg-gray-100">
|
|
<Image
|
|
src="/adversment.png"
|
|
alt="Advertisement"
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
<button className="mt-4 text-xs bg-black text-white px-4 py-2 hover:bg-gray-800">
|
|
LEARN MORE
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function formatDate(dateStr: string): string {
|
|
const options: Intl.DateTimeFormatOptions = {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
};
|
|
return new Date(dateStr).toLocaleDateString("id-ID", options);
|
|
}
|