116 lines
3.5 KiB
TypeScript
116 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Image from "next/image";
|
|
import { getListArticle } from "@/service/article";
|
|
|
|
type Article = {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
categoryName: string;
|
|
createdAt: string;
|
|
createdByName: string;
|
|
thumbnailUrl: string;
|
|
categories: {
|
|
title: string;
|
|
}[];
|
|
files: {
|
|
file_url: string;
|
|
file_alt: string;
|
|
}[];
|
|
};
|
|
|
|
export default function PopularNews() {
|
|
const [popularNews, setPopularNews] = useState<Article[]>([]);
|
|
const [showData, setShowData] = useState("5");
|
|
|
|
useEffect(() => {
|
|
fetchPopularNews();
|
|
}, []);
|
|
|
|
async function fetchPopularNews() {
|
|
try {
|
|
const res = await getListArticle({
|
|
limit: showData,
|
|
page: 1,
|
|
search: "",
|
|
categorySlug: "",
|
|
sort: "desc",
|
|
isPublish: true,
|
|
sortBy: "created_at",
|
|
});
|
|
|
|
setPopularNews(res?.data?.data || []);
|
|
} catch (err) {
|
|
console.error("Gagal load berita populer:", err);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section className="w-full px-4 md:px-12 ">
|
|
<div className="max-w-screen-xl mx-auto">
|
|
<div className="flex flex-row items-center">
|
|
<div className="flex-grow border-t-3 border-gray-300 rounded-md mx-3 mt-1"></div>
|
|
<h2 className="text-center text-lg font-semibold py-3">
|
|
BERITA POPULER
|
|
</h2>
|
|
<div className="flex-grow border-t-3 border-gray-300 rounded-md mx-3 mt-1"></div>
|
|
</div>
|
|
|
|
<div className="mt-6 space-y-2">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2">
|
|
{popularNews.slice(0, 3).map((news) => (
|
|
<div
|
|
key={news.id}
|
|
className="relative h-[358px] group overflow-hidden"
|
|
>
|
|
<Image
|
|
src={news.thumbnailUrl || "/dummy.jpg"}
|
|
alt={news.title}
|
|
width={361}
|
|
height={358}
|
|
className="w-full h-[358px] object-cover transition-transform duration-300 group-hover:scale-105"
|
|
/>
|
|
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent text-white p-3">
|
|
<p className="text-xl font-serif font-medium">{news.title}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2">
|
|
{popularNews.slice(3).map((news) => (
|
|
<div
|
|
key={news.id}
|
|
className="relative h-[267px] group overflow-hidden"
|
|
>
|
|
<Image
|
|
src={news.thumbnailUrl || "/dummy.jpg"}
|
|
alt={news.title}
|
|
width={500}
|
|
height={267}
|
|
className="w-full h-[267px] object-cover transition-transform duration-300 group-hover:scale-105"
|
|
/>
|
|
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent text-white p-3">
|
|
<p className="text-xl font-serif font-medium">{news.title}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Banner */}
|
|
<div className="relative mt-5 mb-14 max-w-screen-xl h-[125px] overflow-hidden flex items-center mx-auto border">
|
|
<Image
|
|
src="/image-kolom.png"
|
|
alt="Berita Utama"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|