fix
This commit is contained in:
parent
5981d8b96f
commit
516139c1af
|
|
@ -1,3 +1,4 @@
|
|||
import DevelopmentNews from "@/components/landing-page/development/development-news";
|
||||
import HeaderDevelopment from "@/components/landing-page/development/header-development";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
|
||||
|
|
@ -22,6 +23,7 @@ export default function Development() {
|
|||
<Navbar />
|
||||
<div className="flex-1">
|
||||
<HeaderDevelopment />
|
||||
<DevelopmentNews />
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -949,7 +949,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
|
|||
detailData?.isPublish === false &&
|
||||
detailData?.statusId !== 1 &&
|
||||
Number(userId) === detailData?.createdById && (
|
||||
<Button color="primary" onClick={doPublish}>
|
||||
<Button type="button" color="primary" onClick={doPublish}>
|
||||
Publish
|
||||
</Button>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,319 @@
|
|||
"use client";
|
||||
import { getListArticle } from "@/service/article";
|
||||
import Image from "next/image";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import news from "../news";
|
||||
|
||||
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;
|
||||
}[];
|
||||
};
|
||||
|
||||
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("2");
|
||||
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 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,
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
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-4">
|
||||
{/* Left Content */}
|
||||
<div className="lg:col-span-2 space-y-10">
|
||||
{articles.map((item) => (
|
||||
<div key={item.id} className="flex flex-col md:flex-row gap-6">
|
||||
{/* 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 || categoryLabel}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1">
|
||||
<h2 className="text-xl font-bold text-[#16324F] hover:text-green-600 cursor-pointer">
|
||||
{item.title}
|
||||
</h2>
|
||||
<div className="text-sm text-gray-600 mt-2">
|
||||
BY{" "}
|
||||
<span className="text-green-600 font-semibold">
|
||||
{item.createdByName || "Admin"}
|
||||
</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>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="flex items-center justify-center gap-2 mt-6">
|
||||
{Array.from({ length: totalPage }, (_, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => setPage(i + 1)}
|
||||
className={`px-3 py-1 ${
|
||||
page === i + 1 ? "bg-green-600 text-white" : "border"
|
||||
}`}
|
||||
>
|
||||
{i + 1}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Advertisement */}
|
||||
<div className="w-full h-[400px] relative">
|
||||
<Image
|
||||
src="/advertisiment.png"
|
||||
alt="Advertisement"
|
||||
fill
|
||||
className="object-cover rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Connect with us */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Connect with us</h3>
|
||||
<div className="h-1 w-20 bg-green-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-green-600 text-green-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.map((item) => (
|
||||
<div key={item.id} className="flex gap-3 items-center">
|
||||
<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>
|
||||
</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">
|
||||
<Image
|
||||
src={
|
||||
articles[0]?.thumbnailUrl ||
|
||||
articles[0]?.files?.[0]?.file_url ||
|
||||
"/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>
|
||||
</div>
|
||||
|
||||
<div className="space-y-5">
|
||||
{articles?.slice(1, 4).map((article, index) => (
|
||||
<div key={index} className="flex gap-3">
|
||||
<div className="relative w-[120px] h-[86px] shrink-0">
|
||||
<Image
|
||||
src={
|
||||
article?.thumbnailUrl ||
|
||||
article?.files?.[0]?.file_url ||
|
||||
"/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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,9 +1,20 @@
|
|||
"use client";
|
||||
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationEllipsis,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "@/components/ui/pagination";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function CustomPagination(props: { totalPage: number; onPageChange: (data: number) => void }) {
|
||||
export default function CustomPagination(props: {
|
||||
totalPage: number;
|
||||
onPageChange: (data: number) => void;
|
||||
}) {
|
||||
const { totalPage, onPageChange } = props;
|
||||
const [page, setPage] = useState(1);
|
||||
|
||||
|
|
@ -19,9 +30,12 @@ export default function CustomPagination(props: { totalPage: number; onPageChang
|
|||
|
||||
if (endPage - startPage + 1 < 5) {
|
||||
if (page <= halfWindow) {
|
||||
endPage = Math.min(totalPage, endPage + (5 - (endPage - startPage + 1)));
|
||||
endPage = Math.min(
|
||||
totalPage - 1,
|
||||
endPage + (5 - (endPage - startPage + 1))
|
||||
);
|
||||
} else if (page + halfWindow >= totalPage) {
|
||||
startPage = Math.max(1, startPage - (5 - (endPage - startPage + 1)));
|
||||
startPage = Math.max(2, startPage - (5 - (endPage - startPage + 1)));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -41,42 +55,69 @@ export default function CustomPagination(props: { totalPage: number; onPageChang
|
|||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationLink className="cursor-pointer" onClick={() => (page > 10 ? setPage(page - 10) : "")}>
|
||||
<PaginationLink
|
||||
className="cursor-pointer"
|
||||
onClick={() => (page > 10 ? setPage(page - 10) : "")}
|
||||
>
|
||||
{/* <DoubleArrowLeftIcon /> */}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious className="cursor-pointer" onClick={() => (page > 1 ? setPage(page - 1) : "")} />
|
||||
<PaginationPrevious
|
||||
className="cursor-pointer"
|
||||
onClick={() => (page > 1 ? setPage(page - 1) : "")}
|
||||
/>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink className="cursor-pointer" onClick={() => setPage(1)} isActive={page === 1}>
|
||||
<PaginationLink
|
||||
className="cursor-pointer"
|
||||
onClick={() => setPage(1)}
|
||||
isActive={page === 1}
|
||||
>
|
||||
{1}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
{page > 4 && (
|
||||
<PaginationItem>
|
||||
<PaginationEllipsis className="cursor-pointer" onClick={() => setPage(page - 1)} />
|
||||
<PaginationEllipsis
|
||||
className="cursor-pointer"
|
||||
onClick={() => setPage(page - 1)}
|
||||
/>
|
||||
</PaginationItem>
|
||||
)}
|
||||
{renderPageNumbers()}
|
||||
{page < totalPage - 3 && (
|
||||
<PaginationItem>
|
||||
<PaginationEllipsis className="cursor-pointer" onClick={() => setPage(page + 1)} />
|
||||
<PaginationEllipsis
|
||||
className="cursor-pointer"
|
||||
onClick={() => setPage(page + 1)}
|
||||
/>
|
||||
</PaginationItem>
|
||||
)}
|
||||
{totalPage > 1 && (
|
||||
<PaginationItem>
|
||||
<PaginationLink className="cursor-pointer" onClick={() => setPage(totalPage)} isActive={page === totalPage}>
|
||||
<PaginationLink
|
||||
className="cursor-pointer"
|
||||
onClick={() => setPage(totalPage)}
|
||||
isActive={page === totalPage}
|
||||
>
|
||||
{totalPage}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
)}
|
||||
|
||||
<PaginationItem>
|
||||
<PaginationNext className="cursor-pointer" onClick={() => (page < totalPage ? setPage(page + 1) : "")} />
|
||||
<PaginationNext
|
||||
className="cursor-pointer"
|
||||
onClick={() => (page < totalPage ? setPage(page + 1) : "")}
|
||||
/>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink onClick={() => (page < totalPage - 10 ? setPage(page + 10) : "")}>{/* <DoubleArrowRightIcon /> */}</PaginationLink>
|
||||
<PaginationLink
|
||||
onClick={() => (page < totalPage - 10 ? setPage(page + 10) : "")}
|
||||
>
|
||||
{/* <DoubleArrowRightIcon /> */}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
|
|
|
|||
|
|
@ -100,15 +100,12 @@ export default function ArticleTable() {
|
|||
setCategories(data);
|
||||
}
|
||||
|
||||
const initState = useCallback(async () => {
|
||||
async function initState() {
|
||||
loading();
|
||||
const req = {
|
||||
limit: showData,
|
||||
page: page,
|
||||
search: search,
|
||||
// startDate:
|
||||
// startDateValue.startDate === null ? "" : startDateValue.startDate,
|
||||
// endDate: startDateValue.endDate === null ? "" : startDateValue.endDate,
|
||||
categorySlug: Array.from(selectedCategories).join(","),
|
||||
sort: "desc",
|
||||
sortBy: "created_at",
|
||||
|
|
@ -117,7 +114,12 @@ export default function ArticleTable() {
|
|||
await getTableNumber(parseInt(showData), res.data?.data);
|
||||
setTotalPage(res?.data?.meta?.totalPage);
|
||||
close();
|
||||
}, [page]);
|
||||
}
|
||||
|
||||
// panggil ulang setiap state berubah
|
||||
useEffect(() => {
|
||||
initState();
|
||||
}, [page, showData, search, selectedCategories]);
|
||||
|
||||
const getTableNumber = async (limit: number, data: Article[]) => {
|
||||
if (data) {
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 347 KiB |
Loading…
Reference in New Issue