258 lines
9.0 KiB
TypeScript
258 lines
9.0 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;
|
|
createdAt: string;
|
|
createdByName: string;
|
|
categories: { title: string }[];
|
|
customCreatorName?: string;
|
|
thumbnailUrl?: string;
|
|
files?: { fileUrl: string; file_alt: string }[];
|
|
};
|
|
|
|
export default function Health() {
|
|
const [articles, setArticles] = useState<Article[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
fetchArticles();
|
|
}, []);
|
|
|
|
async function fetchArticles() {
|
|
setIsLoading(true);
|
|
try {
|
|
const res = await getListArticle({
|
|
limit: "12",
|
|
page: 1,
|
|
search: "",
|
|
categorySlug: "", // ubah sesuai slug kategori kamu
|
|
isPublish: true,
|
|
sortBy: "created_at",
|
|
sort: "desc",
|
|
});
|
|
setArticles(res?.data?.data || []);
|
|
} catch (error) {
|
|
console.error("Error fetching Health articles:", error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
|
|
// Format tanggal Indonesia
|
|
const formatDate = (dateString: string) => {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleDateString("id-ID", {
|
|
day: "2-digit",
|
|
month: "long",
|
|
year: "numeric",
|
|
});
|
|
};
|
|
|
|
// Mapping artikel ke posisi layout
|
|
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);
|
|
|
|
if (isLoading)
|
|
return (
|
|
<p className="text-center text-gray-500 py-10">
|
|
Memuat berita kesehatan...
|
|
</p>
|
|
);
|
|
|
|
return (
|
|
<section className="max-w-7xl mx-auto px-4">
|
|
<h2 className="text-lg font-bold text-white bg-red-600 inline-block px-4 py-2 border-b-2">
|
|
KESEHATAN
|
|
</h2>
|
|
<h2 className="border-b-2 mb-4"></h2>
|
|
|
|
{articles.length === 0 ? (
|
|
<p className="text-gray-500 text-center py-10">
|
|
Belum ada berita di kategori kesehatan.
|
|
</p>
|
|
) : (
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* === LEFT COLUMN === */}
|
|
{leftMain && (
|
|
<div className="w-full">
|
|
<Link href={`/detail/${leftMain.id}`}>
|
|
<div className="relative w-full aspect-video mb-2">
|
|
<Image
|
|
src={leftMain.thumbnailUrl || "/placeholder.jpg"}
|
|
alt={leftMain.title}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
<span className="absolute bottom-2 left-2 bg-yellow-400 text-black text-xs px-2 py-1">
|
|
{leftMain.categories?.[0]?.title}
|
|
</span>
|
|
</div>
|
|
<h3 className="font-semibold text-base mb-2">
|
|
{leftMain.title}
|
|
</h3>
|
|
<p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
|
|
by {leftMain.customCreatorName || leftMain.createdByName} ·{" "}
|
|
{formatDate(leftMain.createdAt)}
|
|
</p>
|
|
<p className="text-[#999999] text-sm font-serif mb-8 line-clamp-3">
|
|
{leftMain.description}
|
|
</p>
|
|
</Link>
|
|
<div className="space-y-8">
|
|
{leftList.map((item) => (
|
|
<div key={item.id}>
|
|
<Link className="flex gap-3" href={`/detail/${item.id}`}>
|
|
<div className="relative w-[120px] h-[86px] shrink-0">
|
|
<Image
|
|
src={item.thumbnailUrl || "/placeholder.jpg"}
|
|
alt={item.title}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-semibold mb-3 line-clamp-2">
|
|
{item.title}
|
|
</h4>
|
|
<p className="text-xs text-gray-500">
|
|
{formatDate(item.createdAt)}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* === CENTER COLUMN === */}
|
|
{centerMain && (
|
|
<div className="w-full">
|
|
<Link href={`/detail/${centerMain.id}`}>
|
|
<div className="relative w-full aspect-video mb-2">
|
|
<Image
|
|
src={centerMain.thumbnailUrl || "/placeholder.jpg"}
|
|
alt={centerMain.title}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
<span className="absolute bottom-2 left-2 bg-yellow-400 text-black text-xs px-2 py-1">
|
|
{centerMain.categories?.[0]?.title}
|
|
</span>
|
|
</div>
|
|
<h3 className="font-semibold text-base mb-2">
|
|
{centerMain.title}
|
|
</h3>
|
|
<p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
|
|
by {centerMain.customCreatorName || centerMain.createdByName}{" "}
|
|
· {formatDate(centerMain.createdAt)}
|
|
</p>
|
|
<p className="text-[#999999] text-sm font-serif mb-8 line-clamp-3">
|
|
{centerMain.description}
|
|
</p>
|
|
</Link>
|
|
<div className="space-y-8">
|
|
{centerList.map((item) => (
|
|
<div key={item.id}>
|
|
<Link className="flex gap-3" href={`/detail/${item.id}`}>
|
|
<div className="relative w-[120px] h-[86px] shrink-0">
|
|
<Image
|
|
src={item.thumbnailUrl || "/placeholder.jpg"}
|
|
alt={item.title}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-semibold mb-3 line-clamp-2">
|
|
{item.title}
|
|
</h4>
|
|
<p className="text-xs text-gray-500">
|
|
{formatDate(item.createdAt)}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* === RIGHT COLUMN === */}
|
|
{rightMain && (
|
|
<div className="w-full">
|
|
<Link href={`/detail/${rightMain.id}`}>
|
|
<div className="relative w-full aspect-video mb-2">
|
|
<Image
|
|
src={rightMain.thumbnailUrl || "/placeholder.jpg"}
|
|
alt={rightMain.title}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
<span className="absolute bottom-2 left-2 bg-yellow-400 text-black text-xs px-2 py-1">
|
|
{rightMain.categories?.[0]?.title}
|
|
</span>
|
|
</div>
|
|
<h3 className="font-semibold text-base mb-2">
|
|
{rightMain.title}
|
|
</h3>
|
|
<p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
|
|
by {rightMain.customCreatorName || rightMain.createdByName} ·{" "}
|
|
{formatDate(rightMain.createdAt)}
|
|
</p>
|
|
<p className="text-[#999999] text-sm font-serif mb-8 line-clamp-3">
|
|
{rightMain.description}
|
|
</p>
|
|
</Link>
|
|
<div className="space-y-8">
|
|
{rightList.map((item) => (
|
|
<div key={item.id}>
|
|
<Link className="flex gap-3" href={`/detail/${item.id}`}>
|
|
<div className="relative w-[120px] h-[86px] shrink-0">
|
|
<Image
|
|
src={item.thumbnailUrl || "/placeholder.jpg"}
|
|
alt={item.title}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-semibold mb-3 line-clamp-2">
|
|
{item.title}
|
|
</h4>
|
|
<p className="text-xs text-gray-500">
|
|
{formatDate(item.createdAt)}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="relative my-8 h-[188px] overflow-hidden flex items-center mx-auto border">
|
|
<Image
|
|
src="/image-kolom.png"
|
|
alt="Berita Utama"
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|