medol
/
web-mikul-news
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix

This commit is contained in:
Anang Yusman 2025-09-17 14:24:41 +08:00
parent 04ee52fb72
commit dbaf98700c
10 changed files with 1036 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/category/citizen-news/page.tsx
View File

@ -1,4 +1,5 @@
import Author from "@/components/landing-page/author";
import CitizenNews from "@/components/landing-page/citizen-news/citizen-news";
import HeaderCitizen from "@/components/landing-page/citizen-news/header-citizen";
import Footer from "@/components/landing-page/footer";
import Header from "@/components/landing-page/header";
@ -26,6 +27,7 @@ export default function Development() {
<Navbar />
<div className="flex-1">
<HeaderCitizen />
<CitizenNews />
</div>
<Footer />
</div>

3
app/category/health/page.tsx
View File

@ -1,6 +1,8 @@
import Author from "@/components/landing-page/author";
import DevelopmentNews from "@/components/landing-page/development/development-news";
import Footer from "@/components/landing-page/footer";
import Header from "@/components/landing-page/header";
import HealthNews from "@/components/landing-page/health/health-news";
import HeaderHealth from "@/components/landing-page/health/header-health";
import Latest from "@/components/landing-page/latest";
import LatestandPopular from "@/components/landing-page/latest-and-popular";
@ -26,6 +28,7 @@ export default function Development() {
<Navbar />
<div className="flex-1">
<HeaderHealth />
<HealthNews />
</div>
<Footer />
</div>

13
components/form/article/edit-article-form.tsx
View File

@ -954,14 +954,11 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
Simpan
</Button>
)}
{isDetail &&
detailData?.isPublish === false &&
detailData?.statusId !== 1 &&
Number(userId) === detailData?.createdById && (
<Button type="button" color="primary" onClick={doPublish}>
Publish
</Button>
)}
{detailData?.isPublish === false && (
<Button type="button" color="primary" onClick={doPublish}>
Publish
</Button>
)}
{/* {!isDetail && (
<Button color="success" type="button">
<p className="text-white">Draft</p>

389
components/landing-page/citizen-news/citizen-news.tsx Normal file
View File

@ -0,0 +1,389 @@
"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";
import Link from "next/link";
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 CitizenNews() {
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 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 citizenArticles = articles.filter((article) =>
article.categories?.some(
(category) => category.title.toLowerCase() === "berita warga"
)
);
// Pagination manually (front-end)
const itemsPerPage = 2;
const calculatedTotalPage = Math.ceil(citizenArticles.length / itemsPerPage);
const paginatedArticles = citizenArticles.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-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>
</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"
>
&lt;
</button>
{/* Page Numbers */}
{Array.from({ length: calculatedTotalPage }, (_, i) => i + 1)
.filter((p) => {
// Always show first, last, current, and pages around current
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-green-600 text-white" : "border"
}`}
>
{p}
</button>
</span>
);
})}
{/* Next Button */}
<button
onClick={() =>
setPage((prev) => Math.min(prev + 1, calculatedTotalPage))
}
disabled={page === calculatedTotalPage}
className="px-3 py-1 border"
>
&gt;
</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.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]?.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>
</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]?.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>
</Link>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
);
}

48
components/landing-page/citizen-news/header-citizen.tsx
View File

@ -36,7 +36,7 @@ export default function HeaderCitizen() {
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
const [articles, setArticles] = useState<Article[]>([]);
const [showData, setShowData] = useState("5");
const [showData, setShowData] = useState("100");
const [search, setSearch] = useState("");
const [selectedCategories, setSelectedCategories] = useState<any>("");
const [startDateValue, setStartDateValue] = useState({
@ -75,6 +75,15 @@ export default function HeaderCitizen() {
}
}
const citizenArticles = articles.filter((article) =>
article.categories?.some(
(category) => category.title.toLowerCase() === "berita warga"
)
);
const mainArticle = citizenArticles[0];
const otherArticles = citizenArticles.slice(1, 3);
return (
<section className="max-w-7xl mx-auto bg-white">
<div className="flex flex-col items-start bg-[#F2F4F3] w-full overflow-hidden py-6 px-8 gap-3">
@ -97,30 +106,26 @@ export default function HeaderCitizen() {
<div className="pb-5">
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
{articles.length > 0 && (
{mainArticle && (
<div className="md:col-span-2 relative">
<Link href={`/detail/${articles[0]?.id}`}>
<Link href={`/detail/${mainArticle.id}`}>
<Image
src={
articles[0]?.files?.[0]?.file_url ||
articles[0]?.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={articles[0].title}
src={mainArticle.files?.[0]?.file_url || "/default-image.jpg"}
alt={mainArticle.title}
width={800}
height={500}
className="w-full h-full max-h-[460px] object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/50 to-transparent p-6 flex flex-col justify-end">
<span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block mb-2 uppercase w-[130px]">
{articles[0].categories?.[0]?.title || "TANPA KATEGORI"}
{mainArticle.categories?.[0]?.title || "TANPA KATEGORI"}
</span>
<h2 className="text-sm md:text-xl lg:text-2xl font-bold text-white leading-snug mb-2 w-full md:w-9/12">
{articles[0].title}
{mainArticle.title}
</h2>
<p className="text-white text-xs">
{articles[0].createdByName} -{" "}
{new Date(articles[0].createdAt).toLocaleDateString(
{mainArticle.createdByName} -{" "}
{new Date(mainArticle.createdAt).toLocaleDateString(
"id-ID",
{
day: "numeric",
@ -135,13 +140,13 @@ export default function HeaderCitizen() {
)}
<div className="grid grid-rows-2 gap-2">
{articles.slice(1, 3).map((article, index) => (
{otherArticles.map((article, index) => (
<div key={index} className="relative">
<Link href={`/detail/${article?.id}`}>
<Link href={`/detail/${article.id}`}>
<Image
src={
article.thumbnailUrl ||
article?.files?.[0]?.file_url ||
article.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={article.title}
@ -151,7 +156,7 @@ export default function HeaderCitizen() {
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent p-4 flex flex-col justify-end">
<span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block uppercase w-[130px]">
{article.categoryName || "TANPA KATEGORI"}
{article.categories?.[0]?.title || "TANPA KATEGORI"}
</span>
<h3 className="text-sm font-semibold text-white leading-snug mb-1">
{article.title}
@ -162,15 +167,6 @@ export default function HeaderCitizen() {
))}
</div>
</div>
<div className="relative mt-10 mb-2 h-[188px] overflow-hidden flex items-center mx-8 border my-8">
<Image
src="/image-kolom.png"
alt="Berita Utama"
fill
className="object-contain"
/>
</div>
</div>
</section>
);

85
components/landing-page/development/development-news.tsx
View File

@ -37,7 +37,7 @@ export default function DevelopmentNews() {
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
const [articles, setArticles] = useState<Article[]>([]);
const [showData, setShowData] = useState("2");
const [showData, setShowData] = useState("100");
const [search, setSearch] = useState("");
const [selectedCategories, setSelectedCategories] = useState<any>("");
const [startDateValue, setStartDateValue] = useState({
@ -63,7 +63,7 @@ export default function DevelopmentNews() {
// loading();
const req = {
limit: showData,
page,
page: 1,
search,
categorySlug: Array.from(selectedCategories).join(","),
sort: "desc",
@ -80,6 +80,23 @@ export default function DevelopmentNews() {
}
}
const pembangunanArticles = articles.filter((article) =>
article.categories?.some(
(category) => category.title.toLowerCase() === "pembangunan"
)
);
// 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;
@ -87,10 +104,10 @@ export default function DevelopmentNews() {
}
return (
<div className="bg-white grid grid-cols-1 lg:grid-cols-3 gap-6 py-10 px-4">
<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">
{articles.map((item) => (
{paginatedArticles.map((item) => (
<div key={item.id}>
<Link
className="flex flex-col md:flex-row gap-6"
@ -105,7 +122,7 @@ export default function DevelopmentNews() {
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}
{item.categories[0]?.title || "Pembangunan"}
</span>
</div>
@ -134,17 +151,51 @@ export default function DevelopmentNews() {
{/* 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>
))}
{/* Previous Button */}
<button
onClick={() => setPage((prev) => Math.max(prev - 1, 1))}
disabled={page === 1}
className="px-3 py-1 border"
>
&lt;
</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-green-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"
>
&gt;
</button>
</div>
</div>
@ -202,7 +253,7 @@ export default function DevelopmentNews() {
</div>
<div className="mt-4 space-y-4">
{articles.map((item) => (
{articles.slice(0, 5).map((item) => (
<div key={item.id} className="flex gap-3 items-center">
<Link
className="flex gap-3 items-center"

45
components/landing-page/development/header-development.tsx
View File

@ -36,7 +36,7 @@ export default function HeaderDevelopment() {
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
const [articles, setArticles] = useState<Article[]>([]);
const [showData, setShowData] = useState("5");
const [showData, setShowData] = useState("100");
const [search, setSearch] = useState("");
const [selectedCategories, setSelectedCategories] = useState<any>("");
const [startDateValue, setStartDateValue] = useState({
@ -44,10 +44,10 @@ export default function HeaderDevelopment() {
endDate: null,
});
const pathname = usePathname(); // e.g., "/category/development"
const pathSegments = pathname.split("/").filter(Boolean); // ["category", "development"]
const pathname = usePathname();
const pathSegments = pathname.split("/").filter(Boolean);
const categorySlug = pathSegments[1]; // "development"
const categorySlug = pathSegments[1];
const categoryLabel = slugToLabel(categorySlug);
useEffect(() => {
@ -75,6 +75,15 @@ export default function HeaderDevelopment() {
}
}
const pembangunanArticles = articles.filter((article) =>
article.categories?.some(
(category) => category.title.toLowerCase() === "pembangunan"
)
);
const mainArticle = pembangunanArticles[0];
const otherArticles = pembangunanArticles.slice(1, 3);
return (
<section className="max-w-7xl mx-auto bg-white">
<div className="flex flex-col jus items-start bg-[#F2F4F3] w-full overflow-hidden py-6 px-8 gap-3">
@ -101,30 +110,26 @@ export default function HeaderDevelopment() {
<div className="pb-5">
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
{articles.length > 0 && (
{mainArticle && (
<div className="md:col-span-2 relative">
<Link href={`/detail/${articles[0]?.id}`}>
<Link href={`/detail/${mainArticle.id}`}>
<Image
src={
articles[0]?.files?.[0]?.file_url ||
articles[0]?.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={articles[0].title}
src={mainArticle.files?.[0]?.file_url || "/default-image.jpg"}
alt={mainArticle.title}
width={800}
height={500}
className="w-full h-full max-h-[460px] object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/50 to-transparent p-6 flex flex-col justify-end">
<span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block mb-2 uppercase w-[130px]">
{articles[0].categories?.[0]?.title || "TANPA KATEGORI"}
{mainArticle.categories?.[0]?.title || "TANPA KATEGORI"}
</span>
<h2 className="text-sm md:text-xl lg:text-2xl font-bold text-white leading-snug mb-2 w-full md:w-9/12">
{articles[0].title}
{mainArticle.title}
</h2>
<p className="text-white text-xs">
{articles[0].createdByName} -{" "}
{new Date(articles[0].createdAt).toLocaleDateString(
{mainArticle.createdByName} -{" "}
{new Date(mainArticle.createdAt).toLocaleDateString(
"id-ID",
{
day: "numeric",
@ -139,13 +144,13 @@ export default function HeaderDevelopment() {
)}
<div className="grid grid-rows-2 gap-2">
{articles.slice(1, 3).map((article, index) => (
{otherArticles.map((article, index) => (
<div key={index} className="relative">
<Link href={`/detail/${article?.id}`}>
<Link href={`/detail/${article.id}`}>
<Image
src={
article.thumbnailUrl ||
article?.files?.[0]?.file_url ||
article.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={article.title}
@ -155,7 +160,7 @@ export default function HeaderDevelopment() {
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent p-4 flex flex-col justify-end">
<span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block uppercase w-[130px]">
{article?.categories?.[0]?.title || "TANPA KATEGORI"}
{article.categories?.[0]?.title || "TANPA KATEGORI"}
</span>
<h3 className="text-sm font-semibold text-white leading-snug mb-1">
{article.title}

48
components/landing-page/health/header-health.tsx
View File

@ -36,7 +36,7 @@ export default function HeaderHealth() {
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
const [articles, setArticles] = useState<Article[]>([]);
const [showData, setShowData] = useState("5");
const [showData, setShowData] = useState("100");
const [search, setSearch] = useState("");
const [selectedCategories, setSelectedCategories] = useState<any>("");
const [startDateValue, setStartDateValue] = useState({
@ -75,6 +75,15 @@ export default function HeaderHealth() {
}
}
const healthArticles = articles.filter((article) =>
article.categories?.some(
(category) => category.title.toLowerCase() === "kesehatan"
)
);
const mainArticle = healthArticles[0];
const otherArticles = healthArticles.slice(1, 3);
return (
<section className="max-w-7xl mx-auto bg-white">
<div className="flex flex-col items-start bg-[#F2F4F3] w-full overflow-hidden py-6 px-8 gap-3">
@ -97,30 +106,26 @@ export default function HeaderHealth() {
<div className="pb-5">
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
{articles.length > 0 && (
{mainArticle && (
<div className="md:col-span-2 relative">
<Link href={`/detail/${articles[0]?.id}`}>
<Link href={`/detail/${mainArticle.id}`}>
<Image
src={
articles[0]?.files?.[0]?.file_url ||
articles[0]?.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={articles[0].title}
src={mainArticle.files?.[0]?.file_url || "/default-image.jpg"}
alt={mainArticle.title}
width={800}
height={500}
className="w-full h-full max-h-[460px] object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/50 to-transparent p-6 flex flex-col justify-end">
<span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block mb-2 uppercase w-[130px]">
{articles[0].categories?.[0]?.title || "TANPA KATEGORI"}
{mainArticle.categories?.[0]?.title || "TANPA KATEGORI"}
</span>
<h2 className="text-sm md:text-xl lg:text-2xl font-bold text-white leading-snug mb-2 w-full md:w-9/12">
{articles[0].title}
{mainArticle.title}
</h2>
<p className="text-white text-xs">
{articles[0].createdByName} -{" "}
{new Date(articles[0].createdAt).toLocaleDateString(
{mainArticle.createdByName} -{" "}
{new Date(mainArticle.createdAt).toLocaleDateString(
"id-ID",
{
day: "numeric",
@ -135,13 +140,13 @@ export default function HeaderHealth() {
)}
<div className="grid grid-rows-2 gap-2">
{articles.slice(1, 3).map((article, index) => (
{otherArticles.map((article, index) => (
<div key={index} className="relative">
<Link href={`/detail/${article?.id}`}>
<Link href={`/detail/${article.id}`}>
<Image
src={
article.thumbnailUrl ||
article?.files?.[0]?.file_url ||
article.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={article.title}
@ -151,7 +156,7 @@ export default function HeaderHealth() {
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent p-4 flex flex-col justify-end">
<span className="text-xs bg-yellow-400 text-black px-2 py-0.5 inline-block uppercase w-[130px]">
{article.categoryName || "TANPA KATEGORI"}
{article.categories?.[0]?.title || "TANPA KATEGORI"}
</span>
<h3 className="text-sm font-semibold text-white leading-snug mb-1">
{article.title}
@ -162,15 +167,6 @@ export default function HeaderHealth() {
))}
</div>
</div>
<div className="relative mt-10 mb-2 h-[188px] overflow-hidden flex items-center mx-8 border my-8">
<Image
src="/image-kolom.png"
alt="Berita Utama"
fill
className="object-contain"
/>
</div>
</div>
</section>
);

380
components/landing-page/health/health-news.tsx Normal file
View File

@ -0,0 +1,380 @@
"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";
import Link from "next/link";
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 HealthNews() {
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 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 kesehatanArticles = articles.filter((article) =>
article.categories?.some(
(category) => category.title.toLowerCase() === "kesehatan"
)
);
const itemsPerPage = 2;
const calculatedTotalPage = Math.ceil(
kesehatanArticles.length / itemsPerPage
);
const paginatedArticles = kesehatanArticles.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">
<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}`}
>
<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-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>
</Link>
</div>
))}
{/* Pagination */}
<div className="flex items-center justify-center gap-2 mt-6">
<button
onClick={() => setPage((prev) => Math.max(prev - 1, 1))}
disabled={page === 1}
className="px-3 py-1 border"
>
&lt;
</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-green-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"
>
&gt;
</button>
</div>
</div>
<div className="space-y-6">
<div className="w-full h-[400px] relative">
<Image
src="/advertisiment.png"
alt="Advertisement"
fill
className="object-cover rounded"
/>
</div>
<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>
<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);
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]?.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>
</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]?.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>
</Link>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
);
}

160
components/landing-page/news.tsx
View File

@ -26,7 +26,7 @@ export default function Beranda() {
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
const [posts, setPosts] = useState<postsData[]>([]);
const [showData, setShowData] = useState("5");
const [showData, setShowData] = useState("100");
const [search, setSearch] = useState("");
const [selectedCategories, setSelectedCategories] = useState<any>("");
const [startDateValue, setStartDateValue] = useState({
@ -63,52 +63,132 @@ export default function Beranda() {
<div className="flex flex-col md:flex-row md:items-center md:justify-between mb-8 pb-1 gap-2 bg-white border-b-2 pt-2 ">
<h2 className="text-sm font-bold">Pembangunan</h2>
<div className="flex flex-wrap gap-2 text-xs text-gray-600">
<button className="hover:text-green-500">ALL</button>
<button className="hover:text-green-500">Pembangunan</button>
<Link href={"/category/development"}>
<button className="hover:text-green-500">ALL</button>
</Link>
<button className="hover:text-green-500 text-green-500">
Pembangunan
</button>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10 pt-4 ">
{posts.slice(1, 5).map((posts, index) => (
<div key={index} className="bg-white overflow-hidden">
<Link href={`/detail/${posts?.id}`}>
<div className="relative">
<Image
src={
posts.thumbnailUrl ||
posts?.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={posts.title}
width={500}
height={300}
className="w-full h-52 md:h-56 object-cover"
/>
<div className="absolute inset-0 bg-black/20" />
<span className="absolute top-1 left-1 bg-[#FFC600] text-black text-[11px] px-2 py-1 uppercase">
{posts.categories?.[0]?.title}
</span>
<div className="p-3 md:p-2 absolute bottom-1 left-1 text-white">
<h3 className="font-bold text-sm md:text-base leading-snug mb-1">
{posts.title}
</h3>
{posts
.filter((post) =>
post.categories?.some(
(category) => category.title.toLowerCase() === "pembangunan"
)
)
.slice(0, 6) // Ambil 4 artikel pertama setelah difilter
.map((post, index) => (
<div key={index} className="bg-white overflow-hidden">
<Link href={`/detail/${post?.id}`}>
<div className="relative">
<Image
src={
post.thumbnailUrl ||
post?.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={post.title}
width={500}
height={300}
className="w-full h-52 md:h-56 object-cover"
/>
<div className="absolute inset-0 bg-black/20" />
<span className="absolute top-1 left-1 bg-[#FFC600] text-black text-[11px] px-2 py-1 uppercase">
{post.categories?.[0]?.title}
</span>
<div className="p-3 md:p-2 absolute bottom-1 left-1 text-white">
<h3 className="font-bold text-sm md:text-base leading-snug mb-1">
{post.title}
</h3>
<div className="text-xs flex items-center gap-2">
<Clock className="w-3 h-3 " />
<span className=" ">
{posts.createdByName} -{" "}
{new Date(posts.createdAt).toLocaleDateString("id-ID", {
day: "numeric",
month: "long",
year: "numeric",
})}
</span>
<div className="text-xs flex items-center gap-2">
<Clock className="w-3 h-3" />
<span>
{post.createdByName} -{" "}
{new Date(post.createdAt).toLocaleDateString("id-ID", {
day: "numeric",
month: "long",
year: "numeric",
})}
</span>
</div>
</div>
</div>
</div>
</Link>
</div>
))}
</Link>
</div>
))}
</div>
<div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
<Image
src="/image-kolom.png"
alt="Berita Utama"
fill
className="object-cover"
/>
</div>
<div className="flex flex-col md:flex-row md:items-center md:justify-between mb-8 pb-1 gap-2 bg-white border-b-2 pt-2 ">
<h2 className="text-sm font-bold">Kesehatan</h2>
<div className="flex flex-wrap gap-2 text-xs text-gray-600">
<Link href={"/category/health"}>
<button className="hover:text-green-500">ALL</button>
</Link>
<button className="hover:text-green-500 text-green-500">
Kesehatan
</button>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10 pt-4 ">
{posts
.filter((post) =>
post.categories?.some(
(category) => category.title.toLowerCase() === "kesehatan"
)
)
.slice(0, 6) // Ambil 4 artikel pertama setelah difilter
.map((post, index) => (
<div key={index} className="bg-white overflow-hidden">
<Link href={`/detail/${post?.id}`}>
<div className="relative">
<Image
src={
post.thumbnailUrl ||
post?.files?.[0]?.file_url ||
"/default-image.jpg"
}
alt={post.title}
width={500}
height={300}
className="w-full h-52 md:h-56 object-cover"
/>
<div className="absolute inset-0 bg-black/20" />
<span className="absolute top-1 left-1 bg-[#FFC600] text-black text-[11px] px-2 py-1 uppercase">
{post.categories?.[0]?.title}
</span>
<div className="p-3 md:p-2 absolute bottom-1 left-1 text-white">
<h3 className="font-bold text-sm md:text-base leading-snug mb-1">
{post.title}
</h3>
<div className="text-xs flex items-center gap-2">
<Clock className="w-3 h-3" />
<span>
{post.createdByName} -{" "}
{new Date(post.createdAt).toLocaleDateString("id-ID", {
day: "numeric",
month: "long",
year: "numeric",
})}
</span>
</div>
</div>
</div>
</Link>
</div>
))}
</div>
<div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
<Image