449 lines
16 KiB
TypeScript
449 lines
16 KiB
TypeScript
"use client";
|
|
import { getListArticle } from "@/service/article";
|
|
import Image from "next/image";
|
|
import { usePathname } from "next/navigation";
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { getAdvertise } from "@/service/advertisement";
|
|
|
|
type Article = {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
categoryName: string;
|
|
createdAt: string;
|
|
createdByName: string;
|
|
customCreatorName: string;
|
|
thumbnailUrl: string;
|
|
categories: {
|
|
title: string;
|
|
}[];
|
|
files: {
|
|
fileUrl: string;
|
|
file_alt: string;
|
|
}[];
|
|
};
|
|
|
|
type Advertise = {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
placement: string;
|
|
contentFileUrl: string;
|
|
redirectLink: string;
|
|
};
|
|
|
|
const slugToLabel = (slug: string) => {
|
|
const mapping: Record<string, string> = {
|
|
development: "Pembangunan",
|
|
health: "Kesehatan",
|
|
"citizen-news": "Berita Warga",
|
|
};
|
|
return mapping[slug] || slug.charAt(0).toUpperCase() + slug.slice(1);
|
|
};
|
|
|
|
export default function DevelopmentNews() {
|
|
const [activeTab, setActiveTab] = useState("comments");
|
|
const [page, setPage] = useState(1);
|
|
const [totalPage, setTotalPage] = useState(1);
|
|
const [articles, setArticles] = useState<Article[]>([]);
|
|
const [showData, setShowData] = useState("100");
|
|
const [search, setSearch] = useState("");
|
|
const [selectedCategories, setSelectedCategories] = useState<any>("");
|
|
const [startDateValue, setStartDateValue] = useState({
|
|
startDate: null,
|
|
endDate: null,
|
|
});
|
|
|
|
const pathname = usePathname();
|
|
const pathSegments = pathname.split("/").filter(Boolean);
|
|
|
|
const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
|
|
|
|
useEffect(() => {
|
|
initStateAdver();
|
|
}, []);
|
|
|
|
async function initStateAdver() {
|
|
const req = {
|
|
limit: 100,
|
|
page: 1,
|
|
sort: "desc",
|
|
sortBy: "created_at",
|
|
isPublish: true,
|
|
};
|
|
|
|
try {
|
|
const res = await getAdvertise(req);
|
|
const data: Advertise[] = res?.data?.data || [1];
|
|
|
|
// filter iklan dengan placement = "banner"
|
|
const banner = data.find((ad) => ad.placement === "jumbotron");
|
|
|
|
if (banner) {
|
|
setBannerAd(banner);
|
|
}
|
|
} catch (err) {
|
|
console.error("Error fetching advertisement:", err);
|
|
}
|
|
}
|
|
|
|
const categorySlug = pathSegments[1];
|
|
const categoryLabel = slugToLabel(categorySlug);
|
|
|
|
useEffect(() => {
|
|
initState();
|
|
}, [page, showData, startDateValue, selectedCategories, activeTab]);
|
|
|
|
async function initState() {
|
|
let sortBy = "created_at";
|
|
if (activeTab === "comments") sortBy = "comment_count";
|
|
if (activeTab === "trending") sortBy = "view_count";
|
|
|
|
// loading();
|
|
const req = {
|
|
limit: showData,
|
|
page: 1,
|
|
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();
|
|
}
|
|
}
|
|
|
|
const pembangunanArticles = articles.filter((article) =>
|
|
article.categories?.some((category) =>
|
|
category.title?.toLowerCase().includes("berita warga")
|
|
)
|
|
);
|
|
|
|
// Pagination manually (front-end)
|
|
const itemsPerPage = 2;
|
|
const calculatedTotalPage = Math.ceil(
|
|
pembangunanArticles.length / itemsPerPage
|
|
);
|
|
|
|
const paginatedArticles = pembangunanArticles.slice(
|
|
(page - 1) * itemsPerPage,
|
|
page * itemsPerPage
|
|
);
|
|
|
|
function truncateText(text: string, wordLimit: number) {
|
|
const words = text.split(" ");
|
|
if (words.length <= wordLimit) return text;
|
|
return words.slice(0, wordLimit).join(" ") + "...";
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white grid grid-cols-1 lg:grid-cols-3 gap-6 py-10 px-8">
|
|
{/* Left Content */}
|
|
<div className="lg:col-span-2 space-y-10">
|
|
{paginatedArticles.map((item) => (
|
|
<div key={item.id}>
|
|
<Link
|
|
className="flex flex-col md:flex-row gap-6"
|
|
href={`/detail/${item?.id}`}
|
|
>
|
|
{/* Image + Category */}
|
|
<div className="relative w-full md:w-1/2 h-64">
|
|
<Image
|
|
src={item.thumbnailUrl || "/placeholder.png"}
|
|
alt={item.title}
|
|
fill
|
|
className="object-cover rounded"
|
|
/>
|
|
<span className="absolute top-3 left-3 bg-yellow-400 text-black px-3 py-1 text-xs font-bold">
|
|
{item.categories[0]?.title || "Pembangunan"}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1">
|
|
<h2 className="text-xl font-bold text-[#16324F] hover:text-blue-600 cursor-pointer">
|
|
{item.title}
|
|
</h2>
|
|
<div className="text-sm text-gray-600 mt-2">
|
|
BY{" "}
|
|
<span className="text-blue-600 font-semibold">
|
|
{item?.customCreatorName || item.createdByName}
|
|
</span>{" "}
|
|
• {new Date(item.createdAt).toLocaleDateString("id-ID")}
|
|
</div>
|
|
<p className="mt-3 text-gray-700">
|
|
{truncateText(item.description, 20)}
|
|
</p>
|
|
<button className="mt-4 px-4 py-2 border border-gray-400 text-gray-700 hover:bg-black hover:text-white transition">
|
|
READ MORE
|
|
</button>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
|
|
{/* Pagination */}
|
|
<div className="flex items-center justify-center gap-2 mt-6">
|
|
{/* Previous Button */}
|
|
<button
|
|
onClick={() => setPage((prev) => Math.max(prev - 1, 1))}
|
|
disabled={page === 1}
|
|
className="px-3 py-1 border"
|
|
>
|
|
<
|
|
</button>
|
|
|
|
{Array.from({ length: calculatedTotalPage }, (_, i) => i + 1)
|
|
.filter((p) => {
|
|
return (
|
|
p === 1 ||
|
|
p === calculatedTotalPage ||
|
|
(p >= page - 1 && p <= page + 1)
|
|
);
|
|
})
|
|
.map((p, idx, arr) => {
|
|
const prev = arr[idx - 1];
|
|
const showEllipsis = prev && p - prev > 1;
|
|
|
|
return (
|
|
<span key={p} className="flex items-center">
|
|
{showEllipsis && <span className="px-2">...</span>}
|
|
<button
|
|
onClick={() => setPage(p)}
|
|
className={`px-3 py-1 ${
|
|
page === p ? "bg-blue-600 text-white" : "border"
|
|
}`}
|
|
>
|
|
{p}
|
|
</button>
|
|
</span>
|
|
);
|
|
})}
|
|
|
|
<button
|
|
onClick={() =>
|
|
setPage((prev) => Math.min(prev + 1, calculatedTotalPage))
|
|
}
|
|
disabled={page === calculatedTotalPage}
|
|
className="px-3 py-1 border"
|
|
>
|
|
>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div className="space-y-6">
|
|
{/* Advertisement */}
|
|
<div className="w-full h-[400px] relative">
|
|
{bannerAd ? (
|
|
<a
|
|
href={bannerAd.redirectLink}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="block w-full"
|
|
>
|
|
<div className="relative w-full h-[350px] flex justify-center">
|
|
<Image
|
|
src={bannerAd.contentFileUrl}
|
|
alt={bannerAd.title || "Iklan Banner"}
|
|
width={1200} // ukuran dasar untuk responsive
|
|
height={350}
|
|
className="object-cover w-full h-full"
|
|
/>
|
|
</div>
|
|
</a>
|
|
) : (
|
|
<Image
|
|
src="/kolom.png"
|
|
alt="Berita Utama"
|
|
width={1200}
|
|
height={188}
|
|
className="object-contain w-full h-[188px]"
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* Connect with us */}
|
|
<div>
|
|
<h3 className="text-lg font-semibold mb-2">Connect with us</h3>
|
|
<div className="h-1 w-20 bg-blue-600 mb-4"></div>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
<div className="bg-blue-500 text-white text-center p-3">
|
|
<p className="text-xl font-bold">138</p>
|
|
<p className="text-sm">Followers</p>
|
|
</div>
|
|
<div className="bg-red-600 text-white text-center p-3">
|
|
<p className="text-xl font-bold">205k</p>
|
|
<p className="text-sm">Subscribers</p>
|
|
</div>
|
|
<div className="bg-yellow-400 text-black text-center p-3">
|
|
<p className="text-xl font-bold">23.9k</p>
|
|
<p className="text-sm">Followers</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div>
|
|
<div className="flex gap-4 border-b">
|
|
{["trending", "comments", "latest"].map((tab) => (
|
|
<button
|
|
key={tab}
|
|
className={`pb-2 capitalize ${
|
|
activeTab === tab
|
|
? "border-b-2 border-blue-600 text-blue-600"
|
|
: "text-gray-600"
|
|
}`}
|
|
onClick={() => {
|
|
setPage(1); // reset page setiap ganti tab
|
|
setActiveTab(tab);
|
|
}}
|
|
>
|
|
{tab}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-4 space-y-4">
|
|
{articles.slice(0, 5).map((item) => (
|
|
<div key={item.id} className="flex gap-3 items-center">
|
|
<Link
|
|
className="flex gap-3 items-center"
|
|
href={`/detail/${item?.id}`}
|
|
>
|
|
<Image
|
|
src={item.thumbnailUrl || "/no-image.jpg"}
|
|
alt={item.title}
|
|
width={80}
|
|
height={60}
|
|
className="object-cover rounded"
|
|
/>
|
|
<div>
|
|
<h3 className="font-semibold text-sm">{item.title}</h3>
|
|
<p className="text-xs text-gray-500">
|
|
{new Date(item.createdAt).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="">
|
|
<h2 className="text-sm border-b-2 border-gray-300 font-bold mb-4">
|
|
Recommended
|
|
</h2>
|
|
<div className=" w-full">
|
|
<div className="relative w-full aspect-video mb-5">
|
|
<Link href={`/detail/${articles[0]?.id}`}>
|
|
<Image
|
|
src={
|
|
articles[0]?.thumbnailUrl ||
|
|
articles[0]?.files?.[0]?.fileUrl ||
|
|
"/default-image.jpg"
|
|
}
|
|
alt={"articles[0]?.title"}
|
|
fill
|
|
sizes="(max-width: 1024px) 100vw, 33vw"
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/30" />
|
|
<div className="absolute bottom-0.5 left-2 text-white">
|
|
<h3 className=" font-semibold text-base mb-1">
|
|
{articles[0]?.title}
|
|
</h3>
|
|
<p className=" text-xs mb-2 flex items-center gap-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<g fill="none">
|
|
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
|
|
<path
|
|
fill="currentColor"
|
|
d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m0 2a1 1 0 0 1 .993.883L13 7v4.586l2.707 2.707a1 1 0 0 1-1.32 1.497l-.094-.083l-3-3a1 1 0 0 1-.284-.576L11 12V7a1 1 0 0 1 1-1"
|
|
/>
|
|
</g>
|
|
</svg>{" "}
|
|
{new Date(articles[0]?.createdAt).toLocaleDateString(
|
|
"id-ID",
|
|
{
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
}
|
|
)}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="space-y-5">
|
|
{articles?.slice(1, 4).map((article, index) => (
|
|
<div key={index}>
|
|
<Link
|
|
className="flex gap-3"
|
|
href={`/detail/${article?.id}`}
|
|
>
|
|
<div className="relative w-[120px] h-[86px] shrink-0">
|
|
<Image
|
|
src={
|
|
article?.thumbnailUrl ||
|
|
article?.files?.[0]?.fileUrl ||
|
|
"/default-image.jpg"
|
|
}
|
|
alt={"article?.title"}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-semibold mb-3">
|
|
{article?.title}
|
|
</h4>
|
|
<p className="text-xs text-gray-500 flex gap-2 items-center">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<g fill="none">
|
|
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
|
|
<path
|
|
fill="currentColor"
|
|
d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m0 2a1 1 0 0 1 .993.883L13 7v4.586l2.707 2.707a1 1 0 0 1-1.32 1.497l-.094-.083l-3-3a1 1 0 0 1-.284-.576L11 12V7a1 1 0 0 1 1-1"
|
|
/>
|
|
</g>
|
|
</svg>{" "}
|
|
{new Date(articles[0]?.createdAt).toLocaleDateString(
|
|
"id-ID",
|
|
{
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
}
|
|
)}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|