99 lines
2.8 KiB
TypeScript
99 lines
2.8 KiB
TypeScript
"use client";
|
|
import { getListArticle } from "@/service/article";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
|
|
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 Header() {
|
|
const [page, setPage] = useState(1);
|
|
const [totalPage, setTotalPage] = useState(1);
|
|
const [articles, setArticles] = useState<Article[]>([]);
|
|
const [showData, setShowData] = useState("5");
|
|
const [search, setSearch] = useState("");
|
|
const [selectedCategories, setSelectedCategories] = useState<any>("");
|
|
const [startDateValue, setStartDateValue] = useState({
|
|
startDate: null,
|
|
endDate: null,
|
|
});
|
|
|
|
useEffect(() => {
|
|
initState();
|
|
}, [page, showData, startDateValue, selectedCategories]);
|
|
|
|
async function initState() {
|
|
// loading();
|
|
const req = {
|
|
limit: showData,
|
|
page,
|
|
search,
|
|
categorySlug: Array.from(selectedCategories).join(","),
|
|
sort: "desc",
|
|
isPublish: true,
|
|
sortBy: "created_at",
|
|
};
|
|
|
|
try {
|
|
const res = await getListArticle(req);
|
|
setArticles(res?.data?.data || []);
|
|
setTotalPage(res?.data?.meta?.totalPage || 1);
|
|
} finally {
|
|
// close();
|
|
}
|
|
}
|
|
return (
|
|
<section className="px-4 py-4 bg-white">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-1 max-w-[1350px] mx-auto">
|
|
{articles.map((article, index) => (
|
|
<div
|
|
key={index}
|
|
className="border border-gray-200 overflow-hidden shadow-sm bg-white h-[440px]"
|
|
>
|
|
<Link href={`/detail/${article?.id}`}>
|
|
<Image
|
|
src={article.thumbnailUrl}
|
|
alt={article.title}
|
|
width={267}
|
|
height={191}
|
|
className="w-full h-48 object-cover"
|
|
/>
|
|
<div className="p-4 text-center">
|
|
<p className="text-xs text-gray-400 font-medium tracking-wider uppercase py-2">
|
|
{article?.categories?.[0]?.title || "TANPA KATEGORI"}
|
|
</p>
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4 leading-snug px-8">
|
|
{article.title}
|
|
</h3>
|
|
<p className="text-xs text-gray-400">
|
|
{" "}
|
|
{new Date(article.createdAt).toLocaleDateString("id-ID", {
|
|
day: "2-digit",
|
|
month: "long",
|
|
year: "numeric",
|
|
})}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|