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

fix: landingpage

This commit is contained in:
Anang Yusman 2026-02-02 11:07:09 +08:00
parent 908e4b2e52
commit 78074b325a
17 changed files with 1071 additions and 871 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/page.tsx
View File

@ -1,16 +1,24 @@
import Development from "@/components/landing-page/development";
import Footer from "@/components/landing-page/footer"; import Footer from "@/components/landing-page/footer";
import Header from "@/components/landing-page/header"; import Header from "@/components/landing-page/header";
import NewsTerkini from "@/components/landing-page/health";
import LatestNews from "@/components/landing-page/latest-news";
import Navbar from "@/components/landing-page/navbar"; import Navbar from "@/components/landing-page/navbar";
import Beranda from "@/components/landing-page/news"; import OpinionNews from "@/components/landing-page/opinion-news";
import YouTubeSection from "@/components/landing-page/youtube-selection";
export default function Home() { export default function Home() {
return ( return (
<div className="flex min-h-screen flex-col font-[family-name:var(--font-geist-sans)] bg-white"> <div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
<Navbar /> <Navbar />
<div className="flex-1"> <div className="flex-1">
<Header /> <Header />
</div> </div>
<Beranda /> <LatestNews />
<Development />
<OpinionNews />
<NewsTerkini />
<YouTubeSection />
<Footer /> <Footer />
</div> </div>
); );

43
components/details/details-content.tsx
View File

@ -81,7 +81,7 @@ export default function DetailContent() {
const [diseId, setDiseId] = useState(0); const [diseId, setDiseId] = useState(0);
const [thumbnailImg, setThumbnailImg] = useState<File[]>([]); const [thumbnailImg, setThumbnailImg] = useState<File[]>([]);
const [selectedMainImage, setSelectedMainImage] = useState<number | null>( const [selectedMainImage, setSelectedMainImage] = useState<number | null>(
null null,
); );
const [selectedIndex, setSelectedIndex] = useState(0); const [selectedIndex, setSelectedIndex] = useState(0);
@ -342,7 +342,7 @@ export default function DetailContent() {
{articleDetail?.title} {articleDetail?.title}
</h1> </h1>
<div className="flex items-center space-x-2 text-sm text-gray-500 mb-4"> <div className="flex items-center space-x-2 text-sm text-gray-500 mb-4">
<div className="text-blue-500"> <div className="text-green-500">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="24" width="24"
@ -362,20 +362,23 @@ export default function DetailContent() {
</svg> </svg>
</div> </div>
<span className="text-blue-500 font-medium"> <span className="text-green-500 font-medium">
{articleDetail?.customCreatorName || articleDetail?.createdByName} {articleDetail?.customCreatorName || articleDetail?.createdByName}
</span> </span>
<span>•</span> <span>•</span>
<span> <span>
<span> {new Date(articleDetail?.publishedAt ?? articleDetail?.createdAt)
{new Date( .toLocaleString("id-ID", {
articleDetail?.publishedAt ?? articleDetail?.createdAt
).toLocaleDateString("id-ID", {
day: "numeric", day: "numeric",
month: "long", month: "long",
year: "numeric", year: "numeric",
})} hour: "2-digit",
</span> minute: "2-digit",
hour12: false,
timeZone: "Asia/Jakarta",
})
.replace("pukul ", "")}{" "}
WIB
</span> </span>
<span>•</span> <span>•</span>
<span>{articleDetail?.categories?.[0]?.title}</span> <span>{articleDetail?.categories?.[0]?.title}</span>
@ -504,7 +507,7 @@ export default function DetailContent() {
<div <div
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: decodeHtmlString( __html: decodeHtmlString(
articleDetail?.htmlDescription || "" articleDetail?.htmlDescription || "",
), ),
}} }}
/> />
@ -595,7 +598,7 @@ export default function DetailContent() {
className="rounded-full" className="rounded-full"
/> />
<div> <div>
<p className="text-blue-600 font-bold text-lg"> <p className="text-green-600 font-bold text-lg">
christine natalia christine natalia
</p> </p>
</div> </div>
@ -604,7 +607,7 @@ export default function DetailContent() {
<h2 className="text-2xl font-bold mb-2">Tinggalkan Balasan</h2> <h2 className="text-2xl font-bold mb-2">Tinggalkan Balasan</h2>
<p className="text-gray-600 mb-4 text-sm"> <p className="text-gray-600 mb-4 text-sm">
Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib
ditandai <span className="text-blue-600">*</span> ditandai <span className="text-green-600">*</span>
</p> </p>
<div> <div>
<h3 className="text-lg font-semibold border-b pb-2">Komentar</h3> <h3 className="text-lg font-semibold border-b pb-2">Komentar</h3>
@ -639,11 +642,11 @@ export default function DetailContent() {
htmlFor="komentar" htmlFor="komentar"
className="block text-sm font-medium mb-1" className="block text-sm font-medium mb-1"
> >
Komentar <span className="text-blue-600">*</span> Komentar <span className="text-green-600">*</span>
</label> </label>
<textarea <textarea
id="komentar" id="komentar"
className="w-full border border-gray-300 rounded-md p-3 h-40 focus:outline-none focus:ring-2 focus:ring-blue-600" className="w-full border border-gray-300 rounded-md p-3 h-40 focus:outline-none focus:ring-2 focus:ring-green-600"
{...register("comment", { required: true })} {...register("comment", { required: true })}
/> />
</div> </div>
@ -654,7 +657,7 @@ export default function DetailContent() {
htmlFor="nama" htmlFor="nama"
className="block text-sm font-medium mb-1" className="block text-sm font-medium mb-1"
> >
Nama <span className="text-blue-600">*</span> Nama <span className="text-green-600">*</span>
</label> </label>
<input <input
type="text" type="text"
@ -670,7 +673,7 @@ export default function DetailContent() {
htmlFor="email" htmlFor="email"
className="block text-sm font-medium mb-1" className="block text-sm font-medium mb-1"
> >
Email <span className="text-blue-600">*</span> Email <span className="text-green-600">*</span>
</label> </label>
<input <input
type="email" type="email"
@ -682,7 +685,7 @@ export default function DetailContent() {
<button <button
type="submit" type="submit"
className="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2 w-full" className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2 w-full"
> >
KIRIM KOMENTAR KIRIM KOMENTAR
</button> </button>
@ -715,7 +718,7 @@ export default function DetailContent() {
</div> </div>
<button <button
type="submit" type="submit"
className="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2 rounded-md transition mt-4 w-full" className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 rounded-md transition mt-4 w-full"
> >
Kirim Kirim
</button> </button>
@ -784,7 +787,7 @@ export default function DetailContent() {
onClick={() => setActiveTab(tab.id)} onClick={() => setActiveTab(tab.id)}
className={`pb-2 text-sm font-medium ${ className={`pb-2 text-sm font-medium ${
activeTab === tab.id activeTab === tab.id
? "border-b-2 border-blue-600 text-blue-600" ? "border-b-2 border-green-600 text-green-600"
: "text-gray-600" : "text-gray-600"
}`} }`}
> >
@ -850,7 +853,7 @@ export default function DetailContent() {
</div> </div>
<div className="mt-6"> <div className="mt-6">
<h3 className="text-base font-semibold mb-2 text-gray-800 border-b pb-1 border-blue-600 inline-block"> <h3 className="text-base font-semibold mb-2 text-gray-800 border-b pb-1 border-green-600 inline-block">
Recommended Recommended
</h3> </h3>

26
components/form/article/create-article-form.tsx
View File

@ -56,7 +56,7 @@ const CustomEditor = dynamic(
() => { () => {
return import("@/components/editor/custom-editor"); return import("@/components/editor/custom-editor");
}, },
{ ssr: false } { ssr: false },
); );
interface FileWithPreview extends File { interface FileWithPreview extends File {
@ -118,14 +118,14 @@ export default function CreateArticleForm() {
const [tag, setTag] = useState(""); const [tag, setTag] = useState("");
const [thumbnailImg, setThumbnailImg] = useState<File[]>([]); const [thumbnailImg, setThumbnailImg] = useState<File[]>([]);
const [selectedMainImage, setSelectedMainImage] = useState<number | null>( const [selectedMainImage, setSelectedMainImage] = useState<number | null>(
null null,
); );
const [thumbnailValidation, setThumbnailValidation] = useState(""); const [thumbnailValidation, setThumbnailValidation] = useState("");
const [filesValidation, setFileValidation] = useState(""); const [filesValidation, setFileValidation] = useState("");
const [diseData, setDiseData] = useState<DiseData>(); const [diseData, setDiseData] = useState<DiseData>();
const [selectedWritingType, setSelectedWritingType] = useState("single"); const [selectedWritingType, setSelectedWritingType] = useState("single");
const [status, setStatus] = useState<"publish" | "draft" | "scheduled">( const [status, setStatus] = useState<"publish" | "draft" | "scheduled">(
"publish" "publish",
); );
const [isScheduled, setIsScheduled] = useState(false); const [isScheduled, setIsScheduled] = useState(false);
const [startDateValue, setStartDateValue] = useState<Date | undefined>(); const [startDateValue, setStartDateValue] = useState<Date | undefined>();
@ -230,7 +230,7 @@ export default function CreateArticleForm() {
} }
const saveArticleToDise = async ( const saveArticleToDise = async (
values: z.infer<typeof createArticleSchema> values: z.infer<typeof createArticleSchema>,
) => { ) => {
if (useAi) { if (useAi) {
const request = { const request = {
@ -351,12 +351,12 @@ export default function CreateArticleForm() {
// format: 2025-10-08 14:30:00 // format: 2025-10-08 14:30:00
const formattedDateTime = `${combinedDate.getFullYear()}-${String( const formattedDateTime = `${combinedDate.getFullYear()}-${String(
combinedDate.getMonth() + 1 combinedDate.getMonth() + 1,
).padStart(2, "0")}-${String(combinedDate.getDate()).padStart( ).padStart(2, "0")}-${String(combinedDate.getDate()).padStart(
2, 2,
"0" "0",
)} ${String(combinedDate.getHours()).padStart(2, "0")}:${String( )} ${String(combinedDate.getHours()).padStart(2, "0")}:${String(
combinedDate.getMinutes() combinedDate.getMinutes(),
).padStart(2, "0")}:00`; ).padStart(2, "0")}:00`;
const request = { const request = {
@ -493,7 +493,7 @@ export default function CreateArticleForm() {
} }
} }
const uniqueArray = temp.filter( const uniqueArray = temp.filter(
(item, index) => temp.indexOf(item) === index (item, index) => temp.indexOf(item) === index,
); );
setValue("tags", uniqueArray as [string, ...string[]]); setValue("tags", uniqueArray as [string, ...string[]]);
@ -514,7 +514,7 @@ export default function CreateArticleForm() {
id="title" id="title"
type="text" type="text"
placeholder="Masukkan judul artikel" placeholder="Masukkan judul artikel"
className="w-full border rounded-lg dark:border-gray-400" className="h-16 px-4 text-2xl leading-tight"
{...field} {...field}
/> />
)} )}
@ -578,7 +578,7 @@ export default function CreateArticleForm() {
// }); // });
setValue( setValue(
"description", "description",
data?.articleBody ? data?.articleBody : "" data?.articleBody ? data?.articleBody : "",
); );
}} }}
/> />
@ -588,7 +588,7 @@ export default function CreateArticleForm() {
setDiseData(data); setDiseData(data);
setValue( setValue(
"description", "description",
data?.articleBody ? data?.articleBody : "" data?.articleBody ? data?.articleBody : "",
); );
}} }}
/> />
@ -781,7 +781,7 @@ export default function CreateArticleForm() {
type="button" type="button"
onClick={() => { onClick={() => {
const filteredTags = value.filter( const filteredTags = value.filter(
(tag: string) => tag !== item (tag: string) => tag !== item,
); );
if (filteredTags.length === 0) { if (filteredTags.length === 0) {
setError("tags", { setError("tags", {
@ -792,7 +792,7 @@ export default function CreateArticleForm() {
clearErrors("tags"); clearErrors("tags");
setValue( setValue(
"tags", "tags",
filteredTags as [string, ...string[]] filteredTags as [string, ...string[]],
); );
} }
}} }}

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

@ -23,6 +23,7 @@ import {
deleteArticleFiles, deleteArticleFiles,
getArticleByCategory, getArticleByCategory,
getArticleById, getArticleById,
getArticleFiles,
submitApproval, submitApproval,
unPublishArticle, unPublishArticle,
updateArticle, updateArticle,
@ -64,13 +65,13 @@ const ViewEditor = dynamic(
() => { () => {
return import("@/components/editor/view-editor"); return import("@/components/editor/view-editor");
}, },
{ ssr: false } { ssr: false },
); );
const CustomEditor = dynamic( const CustomEditor = dynamic(
() => { () => {
return import("@/components/editor/custom-editor"); return import("@/components/editor/custom-editor");
}, },
{ ssr: false } { ssr: false },
); );
interface FileWithPreview extends File { interface FileWithPreview extends File {
@ -141,7 +142,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
const [diseId, setDiseId] = useState(0); const [diseId, setDiseId] = useState(0);
const [thumbnailImg, setThumbnailImg] = useState<File[]>([]); const [thumbnailImg, setThumbnailImg] = useState<File[]>([]);
const [selectedMainImage, setSelectedMainImage] = useState<number | null>( const [selectedMainImage, setSelectedMainImage] = useState<number | null>(
null null,
); );
const [thumbnailValidation, setThumbnailValidation] = useState(""); const [thumbnailValidation, setThumbnailValidation] = useState("");
// const { isOpen, onOpen, onOpenChange } = useDisclosure(); // const { isOpen, onOpen, onOpenChange } = useDisclosure();
@ -154,7 +155,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
// const [startDateValue, setStartDateValue] = useState<any>(null); // const [startDateValue, setStartDateValue] = useState<any>(null);
// const [timeValue, setTimeValue] = useState("00:00"); // const [timeValue, setTimeValue] = useState("00:00");
const [status, setStatus] = useState<"publish" | "draft" | "scheduled">( const [status, setStatus] = useState<"publish" | "draft" | "scheduled">(
"publish" "publish",
); );
const [isScheduled, setIsScheduled] = useState(false); const [isScheduled, setIsScheduled] = useState(false);
const [startDateValue, setStartDateValue] = useState<Date | undefined>(); const [startDateValue, setStartDateValue] = useState<Date | undefined>();
@ -196,27 +197,49 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
async function initState() { async function initState() {
loading(); loading();
const res = await getArticleById(id); try {
const data = res.data?.data; // 1️⃣ Ambil ARTICLE
setDetailData(data); const articleRes = await getArticleById(id);
setValue("title", data?.title); const articleData = articleRes.data?.data;
setValue("customCreatorName", data?.customCreatorName);
setValue("slug", data?.slug);
setValue("source", data?.source);
const cleanDescription = data?.htmlDescription
? data.htmlDescription
.replace(/\\"/g, '"')
.replace(/\\n/g, "\n", "\\")
.trim()
: "";
setValue("description", cleanDescription);
setValue("tags", data?.tags ? data.tags.split(",") : []);
setThumbnail(data?.thumbnailUrl);
setDiseId(data?.aiArticleId);
setDetailFiles(data?.files);
setupInitCategory(data?.categories); if (!articleData) return;
close();
// ===== ARTICLE DATA =====
setDetailData(articleData);
setValue("title", articleData.title);
setValue("customCreatorName", articleData.customCreatorName);
setValue("slug", articleData.slug);
setValue("source", articleData.source);
const cleanDescription = articleData.htmlDescription
? articleData.htmlDescription
.replace(/\\"/g, '"')
.replace(/\\n/g, "\n")
.trim()
: "";
setValue("description", cleanDescription);
setValue("tags", articleData.tags ? articleData.tags.split(",") : []);
setThumbnail(articleData.thumbnailUrl);
setDiseId(articleData.aiArticleId);
setupInitCategory(articleData.categories);
// 2️⃣ Ambil SEMUA article files
const filesRes = await getArticleFiles();
const allFiles = filesRes.data?.data ?? [];
// 3️⃣ FILTER berdasarkan ARTICLE ID yang sedang dibuka
const filteredFiles = allFiles.filter(
(file: any) => file.articleId === articleData.id,
);
setDetailFiles(filteredFiles);
} catch (error) {
console.error("Init state error:", error);
} finally {
close();
}
} }
const setupInitCategory = (data: any) => { const setupInitCategory = (data: any) => {
@ -329,12 +352,12 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
combinedDate.setHours(hours, minutes, 0, 0); combinedDate.setHours(hours, minutes, 0, 0);
const formattedDateTime = `${combinedDate.getFullYear()}-${String( const formattedDateTime = `${combinedDate.getFullYear()}-${String(
combinedDate.getMonth() + 1 combinedDate.getMonth() + 1,
).padStart(2, "0")}-${String(combinedDate.getDate()).padStart( ).padStart(2, "0")}-${String(combinedDate.getDate()).padStart(
2, 2,
"0" "0",
)} ${String(combinedDate.getHours()).padStart(2, "0")}:${String( )} ${String(combinedDate.getHours()).padStart(2, "0")}:${String(
combinedDate.getMinutes() combinedDate.getMinutes(),
).padStart(2, "0")}:00`; ).padStart(2, "0")}:00`;
const response = await updateArticle(String(id), { const response = await updateArticle(String(id), {
@ -425,12 +448,12 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
// format: 2025-10-08 14:30:00 // format: 2025-10-08 14:30:00
const formattedDateTime = `${combinedDate.getFullYear()}-${String( const formattedDateTime = `${combinedDate.getFullYear()}-${String(
combinedDate.getMonth() + 1 combinedDate.getMonth() + 1,
).padStart(2, "0")}-${String(combinedDate.getDate()).padStart( ).padStart(2, "0")}-${String(combinedDate.getDate()).padStart(
2, 2,
"0" "0",
)} ${String(combinedDate.getHours()).padStart(2, "0")}:${String( )} ${String(combinedDate.getHours()).padStart(2, "0")}:${String(
combinedDate.getMinutes() combinedDate.getMinutes(),
).padStart(2, "0")}:00`; ).padStart(2, "0")}:00`;
const request = { const request = {
@ -667,9 +690,10 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
name="title" name="title"
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<div className="w-full"> <div className="w-full">
<label htmlFor="title" className="block text-sm font-medium mb-1"> <label htmlFor="title" className="block text-xl font-medium mb-2">
Judul Judul
</label> </label>
<Input <Input
type="text" type="text"
id="title" id="title"
@ -677,7 +701,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
value={value ?? ""} value={value ?? ""}
readOnly={isDetail} readOnly={isDetail}
onChange={onChange} onChange={onChange}
className="w-full border rounded-lg" className="h-16 px-4 text-2xl leading-tight"
/> />
</div> </div>
)} )}
@ -1046,7 +1070,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
className="w-3 h-3 cursor-pointer" className="w-3 h-3 cursor-pointer"
onClick={() => { onClick={() => {
const filteredTags = value.filter( const filteredTags = value.filter(
(tag: string) => tag !== item (tag: string) => tag !== item,
); );
if (filteredTags.length === 0) { if (filteredTags.length === 0) {
setError("tags", { setError("tags", {
@ -1057,7 +1081,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
clearErrors("tags"); clearErrors("tags");
setValue( setValue(
"tags", "tags",
filteredTags as [string, ...string[]] filteredTags as [string, ...string[]],
); );
} }
}} }}

18
components/landing-page/citizen-news/citizen-news.tsx
View File

@ -123,8 +123,8 @@ export default function CitizenNews() {
const citizenArticles = articles.filter((article) => const citizenArticles = articles.filter((article) =>
article.categories?.some((category) => article.categories?.some((category) =>
category.title?.toLowerCase().includes("berita warga") category.title?.toLowerCase().includes("suara warga"),
) ),
); );
// Pagination manually (front-end) // Pagination manually (front-end)
@ -133,7 +133,7 @@ export default function CitizenNews() {
const paginatedArticles = citizenArticles.slice( const paginatedArticles = citizenArticles.slice(
(page - 1) * itemsPerPage, (page - 1) * itemsPerPage,
page * itemsPerPage page * itemsPerPage,
); );
function truncateText(text: string, wordLimit: number) { function truncateText(text: string, wordLimit: number) {
@ -160,7 +160,7 @@ export default function CitizenNews() {
fill fill
className="object-cover rounded" className="object-cover rounded"
/> />
<span className="absolute top-3 left-3 bg-yellow-400 text-black px-3 py-1 text-xs font-bold"> <span className="absolute top-3 left-3 bg-green-400 text-white px-3 py-1 text-xs font-bold">
{item.categories[0]?.title || "Pembangunan"} {item.categories[0]?.title || "Pembangunan"}
</span> </span>
</div> </div>
@ -172,7 +172,7 @@ export default function CitizenNews() {
</h2> </h2>
<div className="text-sm text-gray-600 mt-2"> <div className="text-sm text-gray-600 mt-2">
BY{" "} BY{" "}
<span className="text-blue-600 font-semibold"> <span className="text-green-600 font-semibold">
{item?.customCreatorName || item.createdByName} {item?.customCreatorName || item.createdByName}
</span>{" "} </span>{" "}
• {new Date(item.createdAt).toLocaleDateString("id-ID")} • {new Date(item.createdAt).toLocaleDateString("id-ID")}
@ -219,7 +219,7 @@ export default function CitizenNews() {
<button <button
onClick={() => setPage(p)} onClick={() => setPage(p)}
className={`px-3 py-1 ${ className={`px-3 py-1 ${
page === p ? "bg-blue-600 text-white" : "border" page === p ? "bg-green-600 text-white" : "border"
}`} }`}
> >
{p} {p}
@ -286,7 +286,7 @@ export default function CitizenNews() {
<p className="text-xl font-bold">205k</p> <p className="text-xl font-bold">205k</p>
<p className="text-sm">Subscribers</p> <p className="text-sm">Subscribers</p>
</div> </div>
<div className="bg-yellow-400 text-black text-center p-3"> <div className="bg-green-400 text-black text-center p-3">
<p className="text-xl font-bold">23.9k</p> <p className="text-xl font-bold">23.9k</p>
<p className="text-sm">Followers</p> <p className="text-sm">Followers</p>
</div> </div>
@ -382,7 +382,7 @@ export default function CitizenNews() {
day: "numeric", day: "numeric",
month: "long", month: "long",
year: "numeric", year: "numeric",
} },
)} )}
</p> </p>
</div> </div>
@ -433,7 +433,7 @@ export default function CitizenNews() {
day: "numeric", day: "numeric",
month: "long", month: "long",
year: "numeric", year: "numeric",
} },
)} )}
</p> </p>
</div> </div>

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

@ -79,8 +79,8 @@ export default function HeaderCitizen() {
const citizenArticles = articles.filter((article) => const citizenArticles = articles.filter((article) =>
article.categories?.some((category) => article.categories?.some((category) =>
category.title?.toLowerCase().includes("berita warga") category.title?.toLowerCase().includes("suara warga"),
) ),
); );
const mainArticle = citizenArticles[0]; const mainArticle = citizenArticles[0];
@ -111,7 +111,7 @@ export default function HeaderCitizen() {
className="w-full h-full max-h-[460px] object-cover" 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"> <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]"> <span className="text-xs bg-green-400 text-white px-2 py-0.5 inline-block mb-2 uppercase w-[130px]">
{mainArticle.categories?.[0]?.title || "TANPA KATEGORI"} {mainArticle.categories?.[0]?.title || "TANPA KATEGORI"}
</span> </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"> <h2 className="text-sm md:text-xl lg:text-2xl font-bold text-white leading-snug mb-2 w-full md:w-9/12">
@ -127,7 +127,7 @@ export default function HeaderCitizen() {
day: "numeric", day: "numeric",
month: "long", month: "long",
year: "numeric", year: "numeric",
} },
)} )}
</p> </p>
</div> </div>
@ -151,7 +151,7 @@ export default function HeaderCitizen() {
className="w-full h-56 object-cover" className="w-full h-56 object-cover"
/> />
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent p-4 flex flex-col justify-end"> <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]"> <span className="text-xs bg-green-400 text-white px-2 py-0.5 inline-block uppercase w-[130px]">
{article.categories?.[0]?.title || "TANPA KATEGORI"} {article.categories?.[0]?.title || "TANPA KATEGORI"}
</span> </span>
<h3 className="text-sm font-semibold text-white leading-snug mb-1"> <h3 className="text-sm font-semibold text-white leading-snug mb-1">

234
components/landing-page/development.tsx
View File

@ -11,6 +11,7 @@ type Article = {
categoryName: string; categoryName: string;
slug: string; slug: string;
createdAt: string; createdAt: string;
publishedAt: string;
createdByName: string; createdByName: string;
customCreatorName: string; customCreatorName: string;
thumbnailUrl: string; thumbnailUrl: string;
@ -67,183 +68,68 @@ export default function Development() {
return ( return (
<section className="max-w-7xl mx-auto px-4"> <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"> <div className="bg-white ">
PEMBANGUNAN <div className="mb-4">
</h2> <h2 className="text-xl font-black text-[#000]">JAGA NEGERI</h2>
<h2 className="border-b-2 mb-4"></h2>
{articles.length === 0 ? ( <div className="w-10 h-1 bg-green-600 mt-1 rounded"></div>
<p className="text-center text-gray-500 py-10">Memuat berita...</p>
) : (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* === LEFT COLUMN === */}
{leftMain && (
<div className="w-full">
<Link href={`/details/${leftMain.slug}`}>
<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={`/details/${item.slug}`}>
<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={`/details/${centerMain.slug}`}>
<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={`/details/${item.slug}`}>
<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={`/details/${rightMain.slug}`}>
<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={`/details/${item.slug}`}>
<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>
)}
<div className="relative my-8 h-[188px] overflow-hidden flex items-center mx-auto border"> <div className="border-b border-gray-300 mb-5"></div>
<Image
src="/image-kolom.png" <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
alt="Berita Utama" {articles.slice(0, 6).map((item) => (
fill <Link
className="object-contain" href={`/details/${item.slug}`}
/> key={item.id}
className="flex gap-4 pb-4 border-b border-gray-200"
>
<div className="relative w-28 h-28 rounded-md overflow-hidden flex-shrink-0">
<Image
src={item.thumbnailUrl || "/placeholder.jpg"}
alt={item.title}
fill
className="object-cover"
/>
</div>
<div className="flex flex-col">
<p className="text-[11px] font-bold text-black">
<span className="border-b-2 border-green-600 pb-[1px]">
BERITA OPINI
</span>
</p>
<h3 className="font-semibold text-[15px] leading-tight mt-1 line-clamp-2">
{item.title}
</h3>
<p className="text-[11px] text-gray-600 mt-2">
By{" "}
<span className="font-semibold">
{item.customCreatorName}
</span>
</p>
<p className="text-[11px] text-gray-600">
{new Date(item.publishedAt).toLocaleDateString("id-ID", {
day: "numeric",
month: "long",
year: "numeric",
})}
</p>
</div>
</Link>
))}
</div>
<div className="relative h-[140px] w-full overflow-hidden rounded-none my-5">
<Image
src="/image-kolom.png"
alt="Berita Utama"
fill
className="object-fill"
/>
</div>
</div> </div>
</section> </section>
); );

156
components/landing-page/footer.tsx
View File

@ -1,118 +1,66 @@
// components/Footer.tsx // components/Footer.tsx
import Link from "next/link"; import Image from "next/image";
import { Facebook, Twitter, Instagram, Youtube } from "lucide-react";
export default function Footer() { export default function Footer() {
return ( return (
<footer className="bg-white text-[#666666] text-sm font-sans border-t border-gray-200"> <footer className="bg-[#ECEFF5] pt-20 pb-10 w-full">
<div className="max-w-[1350px] mx-auto py-6"> <div className="max-w-screen-xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 ">
{/* Top Menu Links */} {/* Logo */}
<div className="flex flex-wrap justify-center md:justify-start gap-2 md:gap-3 text-xs mb-8 text-black"> <div className="flex justify-center md:justify-end">
{[ <Image
"Tentang Kami", src="/wargabicara-logo.png"
"Disclaimer", alt="Logo"
"Kode Etik Jurnalistik", width={230}
"Kebijakan Privasi", height={230}
"Pedoman Pemberitaan Media Siber", className="object-contain"
].map((item, idx, arr) => ( />
<span
key={idx}
className="flex items-center gap-2 whitespace-nowrap"
>
<a href="#" className="hover:underline">
{item}
</a>
{idx !== arr.length - 1 && (
<span className="text-gray-400">/</span>
)}
</span>
))}
</div> </div>
<hr className="border-t border-gray-200 my-4" /> {/* Subscribe Box */}
<div className="flex justify-center md:justify-end">
<div className=" p-8 w-full md:w-[420px]">
<h2 className="text-2xl font-semibold text-gray-800 leading-snug">
Subscribe us to get <br />
the latest news!
</h2>
{/* Bottom Row */} <label className="block mt-6 mb-1 text-sm text-gray-600">
<div className="flex flex-col md:flex-row items-center justify-between"> Email address:
<p className="text-xs text-gray-500 mb-2 md:mb-0"> </label>
© 2020 - © Copyright humasRI Team All Rights Reserved .
</p>
<div className="flex space-x-4 text-[#A0A0A0]">
<Link href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"
/>
</svg>
</Link>
<Link href="#" className="text-[#A0A0A0]">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M7.91 20.889c8.302 0 12.845-6.885 12.845-12.845c0-.193 0-.387-.009-.58A9.2 9.2 0 0 0 23 5.121a9.2 9.2 0 0 1-2.597.713a4.54 4.54 0 0 0 1.99-2.5a9 9 0 0 1-2.87 1.091A4.5 4.5 0 0 0 16.23 3a4.52 4.52 0 0 0-4.516 4.516c0 .352.044.696.114 1.03a12.82 12.82 0 0 1-9.305-4.718a4.526 4.526 0 0 0 1.4 6.03a4.6 4.6 0 0 1-2.043-.563v.061a4.524 4.524 0 0 0 3.62 4.428a4.4 4.4 0 0 1-1.189.159q-.435 0-.845-.08a4.51 4.51 0 0 0 4.217 3.135a9.05 9.05 0 0 1-5.608 1.936A9 9 0 0 1 1 18.873a12.84 12.84 0 0 0 6.91 2.016"
/>
</svg>
</Link>
<Link href="#" className="text-[#A0A0A0]">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<g
fill="none"
// fill-rule="evenodd" <input
> type="email"
<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" /> placeholder="Your email address"
<path className="w-full border border-gray-300 rounded-md px-4 py-3 outline-none"
fill="currentColor" />
d="M12 4c.855 0 1.732.022 2.582.058l1.004.048l.961.057l.9.061l.822.064a3.8 3.8 0 0 1 3.494 3.423l.04.425l.075.91c.07.943.122 1.971.122 2.954s-.052 2.011-.122 2.954l-.075.91l-.04.425a3.8 3.8 0 0 1-3.495 3.423l-.82.063l-.9.062l-.962.057l-1.004.048A62 62 0 0 1 12 20a62 62 0 0 1-2.582-.058l-1.004-.048l-.961-.057l-.9-.062l-.822-.063a3.8 3.8 0 0 1-3.494-3.423l-.04-.425l-.075-.91A41 41 0 0 1 2 12c0-.983.052-2.011.122-2.954l.075-.91l.04-.425A3.8 3.8 0 0 1 5.73 4.288l.821-.064l.9-.061l.962-.057l1.004-.048A62 62 0 0 1 12 4m-2 5.575v4.85c0 .462.5.75.9.52l4.2-2.425a.6.6 0 0 0 0-1.04l-4.2-2.424a.6.6 0 0 0-.9.52Z"
/> <button className="mt-4 bg-green-600 hover:bg-green-500 text-white px-6 py-3 rounded-md font-medium">
</g> SIGN UP
</svg> </button>
</Link>
<Link href="#" className="text-[#A0A0A0]">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
/>
</svg>
</Link>
<Link href="#" className="text-[#A0A0A0]">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 20 20"
>
<path
fill="currentColor"
// fill-rule="evenodd"
d="M17.802 12.298s1.617 1.597 2.017 2.336a.1.1 0 0 1 .018.035q.244.409.123.645c-.135.261-.592.392-.747.403h-2.858c-.199 0-.613-.052-1.117-.4c-.385-.269-.768-.712-1.139-1.145c-.554-.643-1.033-1.201-1.518-1.201a.6.6 0 0 0-.18.03c-.367.116-.833.639-.833 2.032c0 .436-.344.684-.585.684H9.674c-.446 0-2.768-.156-4.827-2.327C2.324 10.732.058 5.4.036 5.353c-.141-.345.155-.533.475-.533h2.886c.387 0 .513.234.601.444c.102.241.48 1.205 1.1 2.288c1.004 1.762 1.621 2.479 2.114 2.479a.53.53 0 0 0 .264-.07c.644-.354.524-2.654.494-3.128c0-.092-.001-1.027-.331-1.479c-.236-.324-.638-.45-.881-.496c.065-.094.203-.238.38-.323c.441-.22 1.238-.252 2.029-.252h.439c.858.012 1.08.067 1.392.146c.628.15.64.557.585 1.943c-.016.396-.033.842-.033 1.367c0 .112-.005.237-.005.364c-.019.711-.044 1.512.458 1.841a.4.4 0 0 0 .217.062c.174 0 .695 0 2.108-2.425c.62-1.071 1.1-2.334 1.133-2.429c.028-.053.112-.202.214-.262a.5.5 0 0 1 .236-.056h3.395c.37 0 .621.056.67.196c.082.227-.016.92-1.566 3.016c-.261.349-.49.651-.691.915c-1.405 1.844-1.405 1.937.083 3.337"
// clip-rule="evenodd"
/>
</svg>
</Link>
</div> </div>
</div> </div>
</div> </div>
<div className="flex flex-wrap justify-center gap-8 mt-16 text-gray-600 text-sm">
<a href="#">About Us</a>
<a href="#">Contact</a>
<a href="#">Kode Etik Jurnalistik</a>
<a href="#">Kebijakan Privasi</a>
<a href="#">Disclaimer</a>
<a href="#">Pedoman Media Siber</a>
</div>
<div className="flex justify-center gap-8 mt-8 text-gray-700">
<Facebook className="w-5 h-5 cursor-pointer" />
<Twitter className="w-5 h-5 cursor-pointer" />
<Instagram className="w-5 h-5 cursor-pointer" />
<Youtube className="w-5 h-5 cursor-pointer" />
</div>
<p className="text-start text-gray-500 text-sm mt-8 pl-5">
© 2025 Warga Bicara - All Rights Reserved.
</p>
</footer> </footer>
); );
} }

250
components/landing-page/header.tsx
View File

@ -1,18 +1,19 @@
"use client"; "use client";
import { useEffect, useState } from "react";
import Image from "next/image";
import { getListArticle } from "@/service/article"; import { getListArticle } from "@/service/article";
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useEffect, useState } from "react";
type Article = { type Article = {
id: number; id: number;
title: string; title: string;
description: string; description: string;
categoryName: string; categoryName: string;
slug: string;
createdAt: string; createdAt: string;
slug: string;
createdByName: string; createdByName: string;
publishedAt: string;
customCreatorName: string; customCreatorName: string;
thumbnailUrl: string; thumbnailUrl: string;
categories: { title: string }[]; categories: { title: string }[];
@ -24,74 +25,207 @@ export default function Header() {
useEffect(() => { useEffect(() => {
const fetchArticles = async () => { const fetchArticles = async () => {
try { const req = {
const req = { limit: "10",
limit: "5", // tampilkan 5 artikel seperti data dummy sebelumnya page: 1,
page: 1, search: "",
search: "", categorySlug: "",
categorySlug: "", sort: "desc",
sort: "desc", isPublish: true,
isPublish: true, sortBy: "created_at",
sortBy: "created_at", };
};
const res = await getListArticle(req); const res = await getListArticle(req);
setArticles(res?.data?.data || []); setArticles(res?.data?.data || []);
} catch (err) {
console.error("Error fetching articles:", err);
}
}; };
fetchArticles(); fetchArticles();
}, []); }, []);
const flashArticles = articles.slice(0, 8);
const mainArticle = articles[8] || articles[0];
const recentPosts = articles.slice(1, 5);
return ( return (
<section className="px-4 py-8 bg-white"> <section className="max-w-7xl mx-auto bg-white px-4">
<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"> {/* FLASH STRIP */}
{articles.map((article) => { <div className="flex items-center justify-between mt-6 mb-3">
const imageUrl = <div className="flex items-center gap-3">
article.thumbnailUrl || <h4 className="text-green-600 font-semibold">Flash</h4>
article.files?.[0]?.fileUrl || <span className="text-red-500">⚡</span>
"/placeholder.jpg"; // fallback jika gambar tidak ada </div>
<div className="text-xs text-gray-500 hidden md:block">LOAD MORE ➜</div>
</div>
const category = <div className="overflow-x-auto no-scrollbar py-2">
article.categoryName || <div className="flex gap-4">
article.categories?.[0]?.title || {flashArticles.map((item) => (
"SUARA WARGA"; <Link
href={`/details/${item.slug}`}
// Format tanggal dari createdAt key={`flash-${item.id}`}
const date = new Date(article.createdAt).toLocaleDateString("id-ID", { className="min-w-[200px] md:min-w-[220px] bg-gray-800 rounded-lg overflow-hidden relative shadow"
day: "numeric", >
month: "long", <div className="relative w-[200px] md:w-[220px] h-[140px]">
year: "numeric",
});
return (
<div key={article.id}>
<Link
className="border border-gray-200 overflow-hidden shadow-sm bg-white h-[440px]"
href={`/details/${article?.slug}`}
>
<Image <Image
src={imageUrl} src={
alt={article.title} item.thumbnailUrl ||
width={267} item.files?.[0]?.fileUrl ||
height={191} "/placeholder.jpg"
className="w-full h-48 object-cover" }
alt={item.title}
fill
className="object-cover"
/> />
<div className="p-4 text-center"> </div>
<p className="text-xs text-gray-400 font-medium tracking-wider uppercase py-2">
{category} {/* dark overlay with text */}
<div className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent text-white">
<p className="text-xs line-clamp-2">{item.title}</p>
<div className="flex items-center justify-between mt-2 text-[11px] text-gray-300">
<span className="text-yellow-300 bg-black/30 px-1 rounded-sm">
{item.categoryName ||
item.categories?.[0]?.title ||
"Berita"}
</span>
<span>●</span>
</div>
</div>
{/* play icon */}
<div className="absolute top-3 right-3 w-8 h-8 bg-white/80 rounded-full flex items-center justify-center">
<svg
className="w-4 h-4 text-black"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M8 5v14l11-7z" />
</svg>
</div>
</Link>
))}
</div>
</div>
{/* Main Layout */}
<div className="grid grid-cols-1 md:grid-cols-[2.2fr_1fr] gap-6">
{/* LEFT SIDE – MAIN ARTICLE */}
{mainArticle ? (
<div className="relative h-[500px] w-full rounded-xl overflow-hidden shadow-md">
<Link href={`/details/${mainArticle.slug}`}>
<Image
src={
mainArticle.thumbnailUrl ||
mainArticle.files?.[0]?.fileUrl ||
"/placeholder.jpg"
}
alt={mainArticle.files?.[0]?.file_alt || mainArticle.title}
fill
className="object-cover"
/>
{/* White Card Overlay */}
<div className="absolute bottom-6 left-6 bg-white bg-opacity-95 backdrop-blur-sm p-6 shadow-lg max-w-lg">
<span className="text-[11px] bg-green-700 text-white px-2 py-1 rounded-sm">
{mainArticle.categoryName ||
mainArticle.categories?.[0]?.title ||
"Berita"}
</span>
<h2 className="text-xl md:text-2xl font-bold text-gray-900 mt-2 leading-snug">
{mainArticle.title}
</h2>
<div className="flex items-center gap-2 text-gray-600 text-xs mt-3">
<span>
By{" "}
{mainArticle.customCreatorName ||
mainArticle.createdByName ||
"Admin"}
</span>
<span>•</span>
<span>
{new Date(mainArticle.publishedAt).toLocaleDateString(
"id-ID",
{
day: "2-digit",
month: "long",
year: "numeric",
},
)}
</span>
</div>
</div>
</Link>
</div>
) : (
<p className="text-gray-500">Loading...</p>
)}
{/* RIGHT SIDE – RECENT POSTS */}
<div>
<h3 className="text-lg font-semibold mb-3">Recent Posts</h3>
<div className="space-y-4">
{recentPosts.map((item) => (
<Link
key={item.id}
href={`/details/${item.slug}`}
className="flex gap-3"
>
<div className="relative w-35 h-25 rounded-md overflow-hidden">
<Image
src={
item.thumbnailUrl ||
item.files?.[0]?.fileUrl ||
"/placeholder.jpg"
}
alt={item.title}
fill
className="object-cover"
/>
</div>
<div className="flex flex-col">
<p className="text-sm font-semibold line-clamp-2">
{item.title}
</p> </p>
<h3 className="text-lg font-semibold text-gray-900 mb-4 leading-snug px-9"> <span className="text-xs text-gray-500 mt-1">
{article.title} {new Date(item.publishedAt).toLocaleDateString("id-ID", {
</h3> day: "2-digit",
<p className="text-xs text-gray-400">{date}</p> month: "long",
year: "numeric",
})}
</span>
</div> </div>
</Link> </Link>
</div> ))}
); </div>
})} </div>
</div>
{/* LOAD MORE */}
<div className="flex justify-center my-6">
<button className="text-gray-600 text-sm flex items-center gap-2 border-b pb-1">
<span>LOAD MORE</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none">
<path
d="M12 5v14M5 12h14"
stroke="#9CA3AF"
strokeWidth="1.5"
strokeLinecap="round"
/>
</svg>
</button>
</div>
{/* KOLOM PPS BOTTOM BANNER */}
<div className="relative h-[140px] w-full overflow-hidden rounded-none my-5 border rounded-md">
<Image
src="/image-kolom.png"
alt="Kolom PPS Bottom Banner"
fill
className="object-contain"
/>
</div> </div>
</section> </section>
); );

336
components/landing-page/health.tsx
View File

@ -1,8 +1,9 @@
"use client"; "use client";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Image from "next/image"; import Image from "next/image";
import { getListArticle } from "@/service/article";
import Link from "next/link"; import Link from "next/link";
import { getListArticle } from "@/service/article";
type Article = { type Article = {
id: number; id: number;
@ -10,248 +11,175 @@ type Article = {
description: string; description: string;
categoryName: string; categoryName: string;
createdAt: string; createdAt: string;
publishedAt: string;
slug: string; slug: string;
createdByName: string; createdByName: string;
categories: { title: string }[];
customCreatorName?: string; customCreatorName?: string;
thumbnailUrl?: string; thumbnailUrl?: string;
files?: { fileUrl: string; file_alt: string }[]; categories?: { title: string }[];
}; };
export default function Health() { export default function NewsTerkini() {
const [articles, setArticles] = useState<Article[]>([]); const [articles, setArticles] = useState<Article[]>([]);
const [isLoading, setIsLoading] = useState(true); const [popular, setPopular] = useState<Article[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => { useEffect(() => {
fetchArticles(); loadData();
}, []); }, []);
async function fetchArticles() { async function loadData() {
setIsLoading(true); setLoading(true);
try { try {
const res = await getListArticle({ const res = await getListArticle({
limit: "12", limit: "20",
page: 1, page: 1,
search: "", search: "",
categorySlug: "", // ubah sesuai slug kategori kamu
isPublish: true, isPublish: true,
sortBy: "created_at",
sort: "desc", sort: "desc",
sortBy: "created_at",
}); });
setArticles(res?.data?.data || []);
} catch (error) { const data = res?.data?.data || [];
console.error("Error fetching Health articles:", error); setArticles(data.slice(0, 5));
} finally { setPopular(data.slice(0, 5));
setIsLoading(false); } catch (err) {
console.log(err);
} }
setLoading(false);
} }
// Format tanggal Indonesia const formatDate = (d: string) =>
const formatDate = (dateString: string) => { new Date(d).toLocaleDateString("id-ID", {
const date = new Date(dateString); day: "numeric",
return date.toLocaleDateString("id-ID", {
day: "2-digit",
month: "long", month: "long",
year: "numeric", year: "numeric",
}); });
};
// Mapping artikel ke posisi layout if (loading)
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 ( return (
<p className="text-center text-gray-500 py-10"> <p className="text-center py-10 text-gray-500">
Memuat berita kesehatan... Memuat berita terbaru...
</p> </p>
); );
return ( return (
<section className="max-w-7xl mx-auto px-4"> <section className="max-w-7xl mx-auto px-4 grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-6">
<h2 className="text-lg font-bold text-white bg-red-600 inline-block px-4 py-2 border-b-2"> <div>
KESEHATAN <h2 className="text-lg font-bold text-gray-900">BERITA TERKINI</h2>
</h2> <div className="w-14 h-1 bg-green-600 mt-1 mb-4"></div>
<h2 className="border-b-2 mb-4"></h2>
{articles.length === 0 ? ( <div className="space-y-6">
<p className="text-gray-500 text-center py-10"> {articles.map((item) => (
Belum ada berita di kategori kesehatan. <Link
</p> key={item.id}
) : ( href={`/details/${item.slug}`}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> className="block border-b pb-6"
{/* === LEFT COLUMN === */} >
{leftMain && ( <div className="flex gap-4">
<div className="w-full"> <div className="flex-1">
<Link href={`/details/${leftMain.slug}`}> {/* CATEGORY */}
<div className="relative w-full aspect-video mb-2"> <p className="text-[11px] text-green-700 font-semibold mb-1">
{item.categoryName || "Kategori"}
</p>
{/* JUDUL */}
<h3 className="font-bold text-base leading-snug line-clamp-2">
{item.title}
</h3>
{/* DESKRIPSI */}
<p className="text-sm text-gray-600 line-clamp-2 mt-1">
{item.description}
</p>
{/* AUTHOR + DATE */}
<p className="text-xs text-gray-400 mt-2">
By {item.customCreatorName || item.createdByName} —{" "}
{formatDate(item.publishedAt)}
</p>
</div>
<div className="relative w-40 h-28 rounded overflow-hidden flex-shrink-0">
<Image <Image
src={leftMain.thumbnailUrl || "/placeholder.jpg"} src={item.thumbnailUrl || "/placeholder.jpg"}
alt={leftMain.title} alt={item.title}
fill fill
className="object-cover" 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> </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={`/details/${item.slug}`}>
<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> </Link>
)} ))}
{/* === CENTER COLUMN === */}
{centerMain && (
<div className="w-full">
<Link href={`/details/${centerMain.slug}`}>
<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={`/details/${item.slug}`}>
<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={`/details/${rightMain.slug}`}>
<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={`/details/${item.slug}`}>
<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>
)}
<div className="relative my-8 h-[188px] overflow-hidden flex items-center mx-auto border"> {/* LOAD MORE */}
<Image <div className="text-center mt-4 text-green-600 text-sm cursor-pointer">
src="/image-kolom.png" LOAD MORE ↓
alt="Berita Utama" </div>
fill </div>
className="object-contain"
/> <div className="lg:col-span-1">
<h2 className="text-lg font-bold text-gray-900">TERBANYAK DIBAGIKAN</h2>
<div className="w-14 h-1 bg-green-600 mt-1 mb-4"></div>
<div className="space-y-4">
{popular.map((item, index) => (
<Link
key={item.id}
href={`/details/${item.slug}`}
className="flex gap-3 border-b pb-4"
>
{/* NOMOR */}
<div className="text-green-600 font-extrabold text-3xl leading-none">
{(index + 1).toString().padStart(2, "0")}
</div>
<div className="flex-1">
<p className="text-[10px] text-gray-500">
{item.categories?.[0]?.title || "Kategori"}
</p>
<h4 className="font-semibold text-sm leading-snug line-clamp-2">
{item.title}
</h4>
<p className="text-[10px] text-gray-400 mt-1">
{formatDate(item.createdAt)}
</p>
</div>
{/* THUMBNAIL KECIL */}
<div className="relative w-16 h-14 rounded overflow-hidden">
<Image
src={item.thumbnailUrl || "/placeholder.jpg"}
alt={item.title}
fill
className="object-cover"
/>
</div>
</Link>
))}
</div>
<div className="mt-6">
<div className="relative h-[180px] border rounded-lg overflow-hidden mb-6">
<Image
src="/image-kolom.png"
alt="Kolom PPS"
fill
className="object-contain bg-white"
/>
</div>
<div className="relative h-[180px] border rounded-lg overflow-hidden">
<Image
src="/image-kolom.png"
alt="Kolom PPS"
fill
className="object-contain bg-white"
/>
</div>
</div>
</div> </div>
</section> </section>
); );

167
components/landing-page/latest-news.tsx
View File

@ -1,6 +1,7 @@
"use client"; "use client";
import { getListArticle } from "@/service/article"; import { getListArticle } from "@/service/article";
import { ChevronDown } from "lucide-react";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@ -10,8 +11,9 @@ type Article = {
title: string; title: string;
description: string; description: string;
categoryName: string; categoryName: string;
createdAt: string;
slug: string; slug: string;
createdAt: string;
publishedAt: string;
createdByName: string; createdByName: string;
customCreatorName: string; customCreatorName: string;
thumbnailUrl: string; thumbnailUrl: string;
@ -31,7 +33,6 @@ export default function News() {
endDate: null, endDate: null,
}); });
// Fetch data setiap kali page berubah
useEffect(() => { useEffect(() => {
initState(); initState();
}, [page, showData, startDateValue, selectedCategories]); }, [page, showData, startDateValue, selectedCategories]);
@ -56,126 +57,70 @@ export default function News() {
} }
} }
const handlePrev = () => {
if (page > 1) setPage((prev) => prev - 1);
};
const handleNext = () => {
if (page < totalPage) setPage((prev) => prev + 1);
};
return ( return (
<section className="max-w-screen-xl mx-auto px-4 py-10"> <section className="max-w-screen-xl mx-auto px-4 py-10">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div className="">
{/* Berita Terbaru */} {/* TITLE */}
<div className="lg:col-span-2"> <div className="mb-4">
<div className="flex flex-row items-center gap-2 mb-4"> <h2 className="text-xl font-black text-[#000]">BERITA POPULER</h2>
<h2 className="text-lg font-semibold">Berita Terbaru</h2> <div className="w-10 h-1 bg-green-600 mt-1 rounded"></div>
<div className="flex-grow border-t-2 border-gray-300 rounded-md" /> </div>
</div>
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3"> {/* GRID 4 KOLOM */}
{articles.length > 0 ? ( <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
articles.map((item) => ( {articles.slice(0, 4).map((item) => (
<div key={item.id} className="group cursor-pointer"> <Link href={`/details/${item.slug}`} key={item.id}>
<Link href={`/details/${item.slug}`}> <div>
<div className="relative w-full aspect-[3/2] overflow-hidden"> {/* GAMBAR */}
<Image <div className="relative w-full h-56 rounded-lg overflow-hidden">
src={ <Image
item.thumbnailUrl || src={item.thumbnailUrl || "/placeholder.jpg"}
item.files?.[0]?.fileUrl || alt={item.title}
"/placeholder.jpg" fill
} className="object-cover"
alt={item.files?.[0]?.file_alt || item.title} />
fill
className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300"
/>
<span className="absolute bottom-2 left-2 bg-yellow-400 text-black text-[10px] px-2 py-1">
{item.categoryName ||
item.categories?.[0]?.title ||
"Umum"}
</span>
</div>
<h3 className="mt-3 font-bold leading-snug line-clamp-2"> {/* BADGE CATEGORY DI DALAM GAMBAR */}
{item.title} <div className="absolute bottom-2 left-2">
</h3> <span className="px-3 py-1 text-[10px] font-semibold bg-green-600 text-white rounded">
{item.categoryName || "Kategori"}
<p className="text-xs text-[#A0A0A0] mt-1 flex items-center gap-1"> </span>
<svg </div>
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
className="text-gray-400"
>
<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"
/>
</svg>
{new Date(item.createdAt).toLocaleDateString("id-ID", {
day: "2-digit",
month: "long",
year: "numeric",
})}
</p>
</Link>
</div> </div>
))
) : (
<p className="col-span-3 text-center text-gray-500">
Tidak ada artikel tersedia.
</p>
)}
</div>
{/* Pagination */} {/* JUDUL */}
<div className="mt-8 flex flex-wrap gap-2 justify-start"> <h3 className="mt-2 text-base font-bold leading-snug line-clamp-2">
<button {item.title}
onClick={handlePrev} </h3>
disabled={page === 1}
className={`border px-3 py-1 text-xs rounded-sm ${
page === 1
? "opacity-50 cursor-not-allowed"
: "hover:bg-gray-100"
}`}
>
‹ PREV
</button>
<button {/* AUTHOR + DATE */}
onClick={handleNext} <div className="text-[11px] mt-2 flex items-center gap-1 text-gray-700">
disabled={page >= totalPage} <span className="font-semibold">
className={`border px-3 py-1 text-xs rounded-sm ${ By {item.customCreatorName || item.createdByName || "Admin"}
page >= totalPage </span>
? "opacity-50 cursor-not-allowed" <span className="text-yellow-500">-</span>
: "hover:bg-gray-100" <span>
}`} {new Date(item.publishedAt).toLocaleDateString("id-ID", {
> day: "numeric",
NEXT › month: "long",
</button> year: "numeric",
</div> })}
</span>
</div>
</div>
</Link>
))}
</div> </div>
{/* Twitter Section */} <div className="relative h-[160px] w-full overflow-hidden rounded-xl mt-6">
<div> <Image
<h3 className="text-xl font-semibold border-b-2 border-gray-300 mb-4"> src="/image-kolom.png"
Twitter @ArahNegeri alt="Kolom PPS"
</h3> fill
{/* Embed atau konten lain */} className="object-contain bg-white"
/>
</div> </div>
</div> </div>
{/* Banner bawah */}
<div className="relative my-5 h-[188px] overflow-hidden flex items-center mx-auto border">
<Image
src="/image-kolom.png"
alt="Berita Utama"
fill
className="object-contain"
/>
</div>
</section> </section>
); );
} }

278
components/landing-page/navbar.tsx
View File

@ -1,144 +1,170 @@
"use client"; "use client";
import { Lock, Menu, Search } from "lucide-react";
import { Search } from "lucide-react";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { Button } from "../ui/button"; import { usePathname } from "next/navigation";
export default function Navbar() { export default function Navbar() {
const pathname = usePathname();
const isActive = (href: any) => {
return pathname === href || pathname.startsWith(href + "/");
};
return ( return (
<> <div className="w-full bg-white py-4 border-b">
<div className="w-full bg-white "> <div className="max-w-screen-xl mx-auto flex flex-col justify-between px-4">
<div className="flex flex-row items-center border-b-2 border-black mx-5"> {/* Left: Logo */}
<div className="relative w-full h-[113px]"> <div className="flex flex-row justify-between mb-3">
<div className="absolute inset-0 flex items-center justify-center"> <div className="flex items-center">
<Image <Image
src="/Warga.png" src="/wargabicara-logo.png"
alt="Kritik Tajam Logo" alt="Kritik Tajam Logo"
width={100} width={140}
height={93} height={100}
className="object-contain" />
/> </div>
<div className="flex items-center gap-6">
{/* Social Icons */}
<div className="hidden md:flex items-center gap-5 text-black text-xl">
<Link href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"
/>
</svg>
</Link>
<Link href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M7.91 20.889c8.302 0 12.845-6.885 12.845-12.845c0-.193 0-.387-.009-.58A9.2 9.2 0 0 0 23 5.121a9.2 9.2 0 0 1-2.597.713a4.54 4.54 0 0 0 1.99-2.5a9 9 0 0 1-2.87 1.091A4.5 4.5 0 0 0 16.23 3a4.52 4.52 0 0 0-4.516 4.516c0 .352.044.696.114 1.03a12.82 12.82 0 0 1-9.305-4.718a4.526 4.526 0 0 0 1.4 6.03a4.6 4.6 0 0 1-2.043-.563v.061a4.524 4.524 0 0 0 3.62 4.428a4.4 4.4 0 0 1-1.189.159q-.435 0-.845-.08a4.51 4.51 0 0 0 4.217 3.135a9.05 9.05 0 0 1-5.608 1.936A9 9 0 0 1 1 18.873a12.84 12.84 0 0 0 6.91 2.016"
/>
</svg>
</Link>
<Link href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
/>
</svg>
</Link>
<Link href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M12.244 4c.534.003 1.87.016 3.29.073l.504.022c1.429.067 2.857.183 3.566.38c.945.266 1.687 1.04 1.938 2.022c.4 1.56.45 4.602.456 5.339l.001.152v.174c-.007.737-.057 3.78-.457 5.339c-.254.985-.997 1.76-1.938 2.022c-.709.197-2.137.313-3.566.38l-.504.023c-1.42.056-2.756.07-3.29.072l-.235.001h-.255c-1.13-.007-5.856-.058-7.36-.476c-.944-.266-1.687-1.04-1.938-2.022c-.4-1.56-.45-4.602-.456-5.339v-.326c.006-.737.056-3.78.456-5.339c.254-.985.997-1.76 1.939-2.021c1.503-.419 6.23-.47 7.36-.476zM9.999 8.5v7l6-3.5z"
/>
</svg>
</Link>
</div> </div>
</div> </div>
<div className="flex items-center space-x-4 text-black mt-2 md:mt-0 mr-3 md:mr-3 lg:mr-3 xl:mr-0 ">
<Link href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"
/>
</svg>
</Link>
<Link href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 256 209"
>
<path
fill="#55acee"
d="M256 25.45a105 105 0 0 1-30.166 8.27c10.845-6.5 19.172-16.793 23.093-29.057a105.2 105.2 0 0 1-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52c0 4.117.465 8.125 1.36 11.97c-43.65-2.191-82.35-23.1-108.255-54.876c-4.52 7.757-7.11 16.78-7.11 26.404c0 18.222 9.273 34.297 23.365 43.716a52.3 52.3 0 0 1-23.79-6.57q-.004.33-.003.661c0 25.447 18.104 46.675 42.13 51.5a52.6 52.6 0 0 1-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475c-17.975 14.086-40.622 22.483-65.228 22.483c-4.24 0-8.42-.249-12.529-.734c23.243 14.902 50.85 23.597 80.51 23.597c96.607 0 149.434-80.031 149.434-149.435q0-3.417-.152-6.795A106.8 106.8 0 0 0 256 25.45"
/>
</svg>
</Link>
<Link href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 72 72"
>
<path
fill="#ea5a47"
d="M63.874 21.906a7.31 7.31 0 0 0-5.144-5.177C54.193 15.505 36 15.505 36 15.505s-18.193 0-22.73 1.224a7.31 7.31 0 0 0-5.144 5.177C6.91 26.472 6.91 36 6.91 36s0 9.528 1.216 14.095a7.31 7.31 0 0 0 5.144 5.177C17.807 56.495 36 56.495 36 56.495s18.193 0 22.73-1.223a7.31 7.31 0 0 0 5.144-5.177C65.09 45.528 65.09 36 65.09 36s0-9.528-1.216-14.094"
/>
<path fill="#fff" d="M30.05 44.65L45.256 36L30.05 27.35Z" />
<g
fill="none"
stroke="#000"
// stroke-miterlimit="10"
// stroke-width="2"
>
<path d="M63.874 21.906a7.31 7.31 0 0 0-5.144-5.177C54.193 15.505 36 15.505 36 15.505s-18.193 0-22.73 1.224a7.31 7.31 0 0 0-5.144 5.177C6.91 26.472 6.91 36 6.91 36s0 9.528 1.216 14.095a7.31 7.31 0 0 0 5.144 5.177C17.807 56.495 36 56.495 36 56.495s18.193 0 22.73-1.223a7.31 7.31 0 0 0 5.144-5.177C65.09 45.528 65.09 36 65.09 36s0-9.528-1.216-14.094" />
<path
// stroke-linecap="round"
// stroke-linejoin="round"
d="M30.05 44.65L45.256 36L30.05 27.35Z"
/>
</g>
</svg>
</Link>
<Link href="#" className="text-red-500">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
/>
</svg>
</Link>
<Link href="#" className="text-blue-800">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 20 20"
>
<path
fill="currentColor"
// fill-rule="evenodd"
d="M17.802 12.298s1.617 1.597 2.017 2.336a.1.1 0 0 1 .018.035q.244.409.123.645c-.135.261-.592.392-.747.403h-2.858c-.199 0-.613-.052-1.117-.4c-.385-.269-.768-.712-1.139-1.145c-.554-.643-1.033-1.201-1.518-1.201a.6.6 0 0 0-.18.03c-.367.116-.833.639-.833 2.032c0 .436-.344.684-.585.684H9.674c-.446 0-2.768-.156-4.827-2.327C2.324 10.732.058 5.4.036 5.353c-.141-.345.155-.533.475-.533h2.886c.387 0 .513.234.601.444c.102.241.48 1.205 1.1 2.288c1.004 1.762 1.621 2.479 2.114 2.479a.53.53 0 0 0 .264-.07c.644-.354.524-2.654.494-3.128c0-.092-.001-1.027-.331-1.479c-.236-.324-.638-.45-.881-.496c.065-.094.203-.238.38-.323c.441-.22 1.238-.252 2.029-.252h.439c.858.012 1.08.067 1.392.146c.628.15.64.557.585 1.943c-.016.396-.033.842-.033 1.367c0 .112-.005.237-.005.364c-.019.711-.044 1.512.458 1.841a.4.4 0 0 0 .217.062c.174 0 .695 0 2.108-2.425c.62-1.071 1.1-2.334 1.133-2.429c.028-.053.112-.202.214-.262a.5.5 0 0 1 .236-.056h3.395c.37 0 .621.056.67.196c.082.227-.016.92-1.566 3.016c-.261.349-.49.651-.691.915c-1.405 1.844-1.405 1.937.083 3.337"
// clip-rule="evenodd"
/>
</svg>
</Link>
</div>
</div> </div>
<div className=" mx-auto flex items-center justify-between px-4 py-3"> {/* Middle Menu */}
{/* Kiri: Hamburger */} <div className="flex flex-row justify-between">
<div className="flex items-center"> <nav className="hidden md:flex items-center gap-10 text-sm font-semibold">
<Menu className="w-6 h-6 text-black cursor-pointer" /> <Link
</div> href="/"
className={
isActive("/")
? "text-green-400 underline"
: "text-black hover:text-green-400"
}
>
Beranda
</Link>
{/* Tengah: Menu Utama */} <Link
<nav className="hidden md:flex space-x-8 font-bold text-sm text-black"> href="/category/citizen-news"
<a href="/" className="relative"> className={
<span className="border-b-2 border-black pb-1">BERANDA</span> isActive("/category/citizen-news")
</a> ? "text-green-400 underline"
<a href="/category/citizen-news" className="hover:text-gray-700"> : "text-black hover:text-green-400"
BERITA WARGA }
</a> >
<a href="/category/development" className="hover:text-gray-700"> Berita Warga
PEMBANGUNAN </Link>
</a>
<a href="/category/health" className="hover:text-gray-700"> <Link
KESEHATAN href="/category/development"
</a> className={
isActive("/category/development")
? "text-green-400 underline"
: "text-black hover:text-green-400"
}
>
Pembangunan
</Link>
<Link
href="/category/health"
className={
isActive("/category/health")
? "text-green-400 underline"
: "text-black hover:text-green-400"
}
>
Kesehatan
</Link>
</nav> </nav>
{/* Kanan: Search Icon */} <div className="flex items-center gap-2">
<div className="flex items-center gap-3"> <button
<Search className="w-5 h-5 text-black cursor-pointer" /> // onClick={() => document.documentElement.classList.toggle("dark")}
<Link href="/auth" className="font-medium hover:underline"> className="w-10 h-5 rounded-full bg-gray-300 dark:bg-gray-700 relative transition-all"
<Button> >
{" "} <div className="w-5 h-5 bg-white dark:bg-black rounded-full shadow absolute top-0 left-0 dark:left-5 transition-all"></div>
<Lock className="w-4 h-4" /> </button>
Login
</Button> {/* BURGER BUTTON (mobile menu) */}
<button className="md:hidden p-2 rounded-lg border">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={2}
stroke="currentColor"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
<button className="p-2 border rounded-full">
<Search size={15} />
</button>
<Link href={"/auth"}>
<button className="bg-green-400 text-white px-5 py-2 rounded-full text-sm font-semibold">
LOGIN
</button>
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
</> </div>
); );
} }

126
components/landing-page/opinion-news.tsx Normal file
View File

@ -0,0 +1,126 @@
"use client";
import { getListArticle } from "@/service/article";
import { ChevronDown } from "lucide-react";
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;
slug: string;
createdAt: string;
publishedAt: string;
createdByName: string;
customCreatorName: string;
thumbnailUrl: string;
categories: { title: string }[];
files: { fileUrl: string; file_alt: string }[];
};
export default function OpinionNews() {
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
const [articles, setArticles] = useState<Article[]>([]);
const [showData, setShowData] = useState("6");
const [search] = useState("");
const [selectedCategories] = useState<any>("");
const [startDateValue] = useState({
startDate: null,
endDate: null,
});
useEffect(() => {
initState();
}, [page, showData, startDateValue, selectedCategories]);
async function initState() {
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);
} catch (err) {
console.error("Error fetching articles:", err);
}
}
return (
<section className="max-w-screen-xl mx-auto px-4 py-10">
<div className="">
{/* TITLE */}
<div className="mb-4">
<h2 className="text-xl font-black text-[#000]">BERITA OPINI</h2>
<div className="w-10 h-1 bg-green-600 mt-1 rounded"></div>
</div>
{/* GRID 4 KOLOM */}
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
{articles.slice(0, 4).map((item) => (
<Link href={`/details/${item.slug}`} key={item.id}>
<div>
{/* GAMBAR */}
<div className="relative w-full h-56 rounded-lg overflow-hidden">
<Image
src={item.thumbnailUrl || "/placeholder.jpg"}
alt={item.title}
fill
className="object-cover"
/>
{/* BADGE CATEGORY DI DALAM GAMBAR */}
<div className="absolute bottom-2 left-2">
<span className="px-3 py-1 text-[10px] font-semibold bg-green-600 text-white rounded">
{item.categoryName || "Kategori"}
</span>
</div>
</div>
{/* JUDUL */}
<h3 className="mt-2 text-base font-bold leading-snug line-clamp-2">
{item.title}
</h3>
{/* AUTHOR + DATE */}
<div className="text-[11px] mt-2 flex items-center gap-1 text-gray-700">
<span className="font-semibold">
By {item.customCreatorName || item.createdByName || "Admin"}
</span>
<span className="text-yellow-500">-</span>
<span>
{new Date(item.publishedAt).toLocaleDateString("id-ID", {
day: "numeric",
month: "long",
year: "numeric",
})}
</span>
</div>
</div>
</Link>
))}
</div>
<div className="relative h-[160px] w-full overflow-hidden rounded-xl mt-6">
<Image
src="/image-kolom.png"
alt="Kolom PPS"
fill
className="object-contain bg-white"
/>
</div>
</div>
</section>
);
}

151
components/landing-page/youtube-selection.tsx Normal file
View File

@ -0,0 +1,151 @@
import { Eye, Heart, MessageCircle } from "lucide-react";
import Image from "next/image";
interface VideoItem {
id: number;
title: string;
thumbnail: string;
duration: string;
publishedAt: string;
views: string;
likes: string;
comments: string;
}
const sampleVideos: VideoItem[] = [
{
id: 1,
title: "Cuplikan Kegiatan Presiden di IKN",
thumbnail: "/yt/thumb1.jpg",
duration: "12:30",
publishedAt: "2 jam yang lalu",
views: "12K",
likes: "230",
comments: "45",
},
{
id: 2,
title: "Pembangunan MRT Fase Berikutnya Resmi Dimulai",
thumbnail: "/yt/thumb2.jpg",
duration: "08:12",
publishedAt: "5 jam yang lalu",
views: "9.4K",
likes: "180",
comments: "30",
},
{
id: 3,
title: "Wilayah Indonesia Siap Hadapi Cuaca Ekstrem",
thumbnail: "/yt/thumb3.jpg",
duration: "05:50",
publishedAt: "1 hari lalu",
views: "21K",
likes: "540",
comments: "121",
},
{
id: 4,
title: "Peningkatan Ekonomi Regional Terus Dijaga",
thumbnail: "/yt/thumb4.jpg",
duration: "10:44",
publishedAt: "2 hari lalu",
views: "18K",
likes: "420",
comments: "88",
},
{
id: 5,
title: "Laporan Khusus Perkembangan Industri Kreatif",
thumbnail: "/yt/thumb5.jpg",
duration: "14:02",
publishedAt: "3 hari lalu",
views: "30K",
likes: "830",
comments: "200",
},
{
id: 6,
title: "Paparan Menteri Perhubungan Soal Transportasi",
thumbnail: "/yt/thumb6.jpg",
duration: "07:21",
publishedAt: "4 hari lalu",
views: "9K",
likes: "114",
comments: "26",
},
];
export default function YouTubeSection() {
return (
<section className="max-w-7xl mx-auto px-4 py-8">
{/* Header Channel */}
<div className="flex items-center gap-4 mb-6">
<Image
src="/yt-logo.png"
alt="Logo Channel"
width={70}
height={70}
className="rounded-full"
/>
<div>
<h2 className="text-xl font-semibold">YouTube • Channel Resmi</h2>
<p className="text-sm text-gray-600">
Lebih dari 3.5 juta pengikut • 12k video
</p>
</div>
<a
href="#"
className="ml-auto bg-red-600 text-white px-4 py-2 rounded-lg font-semibold"
>
Subscribe
</a>
</div>
{/* Grid Video */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{sampleVideos.map((v) => (
<div key={v.id} className="cursor-pointer">
<div className="relative w-full h-44">
<Image
src={v.thumbnail}
alt={v.title}
fill
className="rounded-lg object-cover"
/>
<span className="absolute bottom-1 right-1 bg-black/80 text-white text-xs px-2 py-1 rounded">
{v.duration}
</span>
</div>
<h3 className="font-semibold mt-2 leading-tight line-clamp-2">
{v.title}
</h3>
<p className="text-sm text-gray-600">{v.publishedAt}</p>
<div className="flex items-center gap-4 text-sm text-gray-700 mt-1">
<span className="flex items-center gap-1">
<Eye size={16} /> {v.views}
</span>
<span className="flex items-center gap-1">
<Heart size={16} /> {v.likes}
</span>
<span className="flex items-center gap-1">
<MessageCircle size={16} /> {v.comments}
</span>
</div>
</div>
))}
</div>
{/* Pagination */}
<div className="flex justify-center mt-8">
<button className="px-5 py-2 rounded-lg border hover:bg-gray-100">
Lihat Selanjutnya →
</button>
</div>
</section>
);
}

BIN
public/wargabicara-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 276 KiB

17
service/article.ts
View File

@ -30,7 +30,7 @@ export async function getListArticle(props: PaginationRequest) {
}&categoryId=${category || ""}&sortBy=${sortBy || "created_at"}&sort=${ }&categoryId=${category || ""}&sortBy=${sortBy || "created_at"}&sort=${
sort || "desc" sort || "desc"
}&category=${categorySlug || ""}&isBanner=${isBanner || ""}`, }&category=${categorySlug || ""}&isBanner=${isBanner || ""}`,
null null,
); );
} }
@ -59,7 +59,7 @@ export async function getArticlePagination(props: PaginationRequest) {
sortBy || "created_at" sortBy || "created_at"
}&sort=${sort || "asc"}&category=${categorySlug || ""}&isBanner=${ }&sort=${sort || "asc"}&category=${categorySlug || ""}&isBanner=${
isBanner || "" isBanner || ""
}` }`,
); );
} }
@ -75,7 +75,7 @@ export async function getTopArticles(props: PaginationRequest) {
}&title=${search}&startDate=${startDate || ""}&endDate=${ }&title=${search}&startDate=${startDate || ""}&endDate=${
endDate || "" endDate || ""
}&category=${category || ""}&sortBy=view_count&sort=desc`, }&category=${category || ""}&sortBy=view_count&sort=desc`,
headers headers,
); );
} }
@ -106,6 +106,13 @@ export async function getArticleById(id: any) {
return await httpGet(`/articles/${id}`, headers); return await httpGet(`/articles/${id}`, headers);
} }
export async function getArticleFiles() {
const headers = {
"content-type": "application/json",
};
return await httpGet(`/article-files`, headers);
}
export async function getArticleBySlug(slug: any) { export async function getArticleBySlug(slug: any) {
const headers = { const headers = {
"content-type": "application/json", "content-type": "application/json",
@ -125,7 +132,7 @@ export async function getArticleByCategory() {
} }
export async function getCategoryPagination(data: any) { export async function getCategoryPagination(data: any) {
return await httpGet( return await httpGet(
`/article-categories?limit=${data?.limit}&page=${data?.page}&title=${data?.search}` `/article-categories?limit=${data?.limit}&page=${data?.page}&title=${data?.search}`,
); );
} }
@ -152,7 +159,7 @@ export async function deleteArticleFiles(id: number) {
export async function getUserLevelDataStat(startDate: string, endDate: string) { export async function getUserLevelDataStat(startDate: string, endDate: string) {
return await httpGet( return await httpGet(
`/articles/statistic/user-levels?startDate=${startDate}&endDate=${endDate}` `/articles/statistic/user-levels?startDate=${startDate}&endDate=${endDate}`,
); );
} }
export async function getStatisticMonthly(year: string) { export async function getStatisticMonthly(year: string) {

24
tsconfig.json
View File

@ -1,7 +1,11 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "ES2017", "target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"], "lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"strict": true, "strict": true,
@ -11,7 +15,7 @@
"moduleResolution": "bundler", "moduleResolution": "bundler",
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, "isolatedModules": true,
"jsx": "preserve", "jsx": "react-jsx",
"incremental": true, "incremental": true,
"plugins": [ "plugins": [
{ {
@ -19,9 +23,19 @@
} }
], ],
"paths": { "paths": {
"@/*": ["./*"] "@/*": [
"./*"
]
} }
}, },
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "include": [
"exclude": ["node_modules"] "next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
".next/dev/types/**/*.ts"
],
"exclude": [
"node_modules"
]
} }