- {[
- "Kode Etik Jurnalistik",
- "Kebijakan Privasi",
- "Tentang Kami",
- "Disclaimer",
- "Pedoman Pemberitaan Media Siber",
- ].map((item, idx, arr) => (
-
-
- {item}
-
- {idx !== arr.length - 1 && (
- /
- )}
-
- ))}
-
-
- © Copyright Arahnegeri Team All Rights Reserved
-
+
);
}
diff --git a/components/landing-page/header.tsx b/components/landing-page/header.tsx
index b0e3d48..50fc79f 100644
--- a/components/landing-page/header.tsx
+++ b/components/landing-page/header.tsx
@@ -24,107 +24,207 @@ export default function Header() {
useEffect(() => {
const fetchArticles = async () => {
- try {
- const req = {
- limit: "2",
- page: 1,
- search: "",
- categorySlug: "",
- sort: "desc",
- isPublish: true,
- sortBy: "created_at",
- };
+ const req = {
+ limit: "10",
+ page: 1,
+ search: "",
+ categorySlug: "",
+ sort: "desc",
+ isPublish: true,
+ sortBy: "created_at",
+ };
- const res = await getListArticle(req);
- setArticles(res?.data?.data || []);
- } catch (err) {
- console.error("Error fetching articles:", err);
- }
+ const res = await getListArticle(req);
+ setArticles(res?.data?.data || []);
};
fetchArticles();
}, []);
+ const flashArticles = articles.slice(0, 8);
+ const mainArticle = articles[8] || articles[0];
+ const recentPosts = articles.slice(1, 5);
+
return (
-
- {/* Header Banner */}
-
-
+
+ {/* FLASH STRIP */}
+
+
+
Flash
+ ⚡
+
+
LOAD MORE ➜
- BERITA UTAMA
-
-
- {/* Grid Artikel */}
-
- {articles.length > 0 ? (
- articles.map((item, index) => (
-
-
+
+
+ {flashArticles.map((item) => (
+
+
+
- {/* Overlay gradient */}
-
-
- {/* Text content */}
-
-
+ {/* dark overlay with text */}
+
+
{item.title}
+
+
{item.categoryName ||
item.categories?.[0]?.title ||
"Berita"}
-
- {item.title}
-
-
-
-
- {new Date(item.createdAt).toLocaleDateString("id-ID", {
+ ●
+
+
+
+ {/* play icon */}
+
+
+ ))}
+
+
+ {/* Main Layout */}
+
+ {/* LEFT SIDE – MAIN ARTICLE */}
+ {mainArticle ? (
+
+
+
+
+ {/* White Card Overlay */}
+
+
+ {mainArticle.categoryName ||
+ mainArticle.categories?.[0]?.title ||
+ "Berita"}
+
+
+
+ {mainArticle.title}
+
+
+
+
+ By{" "}
+ {mainArticle.customCreatorName ||
+ mainArticle.createdByName ||
+ "Admin"}
+
+ •
+
+ {new Date(mainArticle.createdAt).toLocaleDateString(
+ "id-ID",
+ {
day: "2-digit",
month: "long",
year: "numeric",
- })}
-
-
+ }
+ )}
+
+
+
+
+
+ ) : (
+
Loading...
+ )}
+
+ {/* RIGHT SIDE – RECENT POSTS */}
+
+
Recent Posts
+
+
+ {recentPosts.map((item) => (
+
+
+
+
+
+
+
+ {item.title}
+
+
+ {new Date(item.createdAt).toLocaleDateString("id-ID", {
+ day: "2-digit",
+ month: "long",
+ year: "numeric",
+ })}
+
-
- ))
- ) : (
-
- Tidak ada artikel tersedia.
-
- )}
+ ))}
+
+
+
+
+ {/* LOAD MORE */}
+
+
+ {/* KOLOM PPS BOTTOM BANNER */}
+
+
);
diff --git a/components/landing-page/health.tsx b/components/landing-page/health.tsx
index 66b9a57..07f9874 100644
--- a/components/landing-page/health.tsx
+++ b/components/landing-page/health.tsx
@@ -1,8 +1,9 @@
"use client";
+
import { useEffect, useState } from "react";
import Image from "next/image";
-import { getListArticle } from "@/service/article";
import Link from "next/link";
+import { getListArticle } from "@/service/article";
type Article = {
id: number;
@@ -12,246 +13,172 @@ type Article = {
createdAt: string;
slug: string;
createdByName: string;
- categories: { title: string }[];
customCreatorName?: string;
thumbnailUrl?: string;
- files?: { fileUrl: string; file_alt: string }[];
+ categories?: { title: string }[];
};
-export default function Health() {
+export default function NewsTerkini() {
const [articles, setArticles] = useState
([]);
- const [isLoading, setIsLoading] = useState(true);
+ const [popular, setPopular] = useState([]);
+ const [loading, setLoading] = useState(true);
useEffect(() => {
- fetchArticles();
+ loadData();
}, []);
- async function fetchArticles() {
- setIsLoading(true);
+ async function loadData() {
+ setLoading(true);
+
try {
const res = await getListArticle({
- limit: "12",
+ limit: "20",
page: 1,
search: "",
- categorySlug: "", // ubah sesuai slug kategori kamu
isPublish: true,
- sortBy: "created_at",
sort: "desc",
+ sortBy: "created_at",
});
- setArticles(res?.data?.data || []);
- } catch (error) {
- console.error("Error fetching Health articles:", error);
- } finally {
- setIsLoading(false);
+
+ const data = res?.data?.data || [];
+ setArticles(data.slice(0, 5));
+ setPopular(data.slice(0, 5));
+ } catch (err) {
+ console.log(err);
}
+
+ setLoading(false);
}
- // Format tanggal Indonesia
- const formatDate = (dateString: string) => {
- const date = new Date(dateString);
- return date.toLocaleDateString("id-ID", {
- day: "2-digit",
+ const formatDate = (d: string) =>
+ new Date(d).toLocaleDateString("id-ID", {
+ day: "numeric",
month: "long",
year: "numeric",
});
- };
- // Mapping artikel ke posisi layout
- 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)
+ if (loading)
return (
-
- Memuat berita kesehatan...
+
+ Memuat berita terbaru...
);
return (
-
-
- KESEHATAN
-
-
+
+
+
BERITA TERKINI
+
- {articles.length === 0 ? (
-
- Belum ada berita di kategori kesehatan.
-
- ) : (
-
- {/* === LEFT COLUMN === */}
- {leftMain && (
-
-
-
+
+ {articles.map((item) => (
+
+
+
+ {/* CATEGORY */}
+
+ {item.categoryName || "Kategori"}
+
+
+ {/* JUDUL */}
+
+ {item.title}
+
+
+ {/* DESKRIPSI */}
+
+ {item.description}
+
+
+ {/* AUTHOR + DATE */}
+
+ By {item.customCreatorName || item.createdByName} —{" "}
+ {formatDate(item.createdAt)}
+
+
+
-
- {leftMain.categories?.[0]?.title}
-
-
- {leftMain.title}
-
-
- by {leftMain.customCreatorName || leftMain.createdByName} ·{" "}
- {formatDate(leftMain.createdAt)}
-
-
- {leftMain.description}
-
-
-
- {leftList.map((item) => (
-
-
-
-
-
-
-
- {item.title}
-
-
- {formatDate(item.createdAt)}
-
-
-
-
- ))}
-
- )}
-
- {/* === CENTER COLUMN === */}
- {centerMain && (
-
-
-
-
-
- {centerMain.categories?.[0]?.title}
-
-
-
- {centerMain.title}
-
-
- by {centerMain.customCreatorName || centerMain.createdByName}{" "}
- · {formatDate(centerMain.createdAt)}
-
-
- {centerMain.description}
-
-
-
- {centerList.map((item) => (
-
-
-
-
-
-
-
- {item.title}
-
-
- {formatDate(item.createdAt)}
-
-
-
-
- ))}
-
-
- )}
-
- {/* === RIGHT COLUMN === */}
- {rightMain && (
-
-
-
-
-
- {rightMain.categories?.[0]?.title}
-
-
-
- {rightMain.title}
-
-
- by {rightMain.customCreatorName || rightMain.createdByName} ·{" "}
- {formatDate(rightMain.createdAt)}
-
-
- {rightMain.description}
-
-
-
- {rightList.map((item) => (
-
-
-
-
-
-
-
- {item.title}
-
-
- {formatDate(item.createdAt)}
-
-
-
-
- ))}
-
-
- )}
+
+ ))}
- )}
-
-
+ {/* LOAD MORE */}
+
+ LOAD MORE ↓
+
+
+
+
+
TERBANYAK DIBAGIKAN
+
+
+
+ {popular.map((item, index) => (
+
+ {/* NOMOR */}
+
+ {(index + 1).toString().padStart(2, "0")}
+
+
+
+
+ {item.categories?.[0]?.title || "Kategori"}
+
+
+ {item.title}
+
+
+ {formatDate(item.createdAt)}
+
+
+
+ {/* THUMBNAIL KECIL */}
+
+
+
+
+ ))}
+
+
+
);
diff --git a/components/landing-page/latest-news.tsx b/components/landing-page/latest-news.tsx
index 05543d6..7e50705 100644
--- a/components/landing-page/latest-news.tsx
+++ b/components/landing-page/latest-news.tsx
@@ -1,6 +1,7 @@
"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";
@@ -31,7 +32,6 @@ export default function News() {
endDate: null,
});
- // Fetch data setiap kali page berubah
useEffect(() => {
initState();
}, [page, showData, startDateValue, selectedCategories]);
@@ -56,126 +56,70 @@ export default function News() {
}
}
- const handlePrev = () => {
- if (page > 1) setPage((prev) => prev - 1);
- };
-
- const handleNext = () => {
- if (page < totalPage) setPage((prev) => prev + 1);
- };
-
return (
-
- {/* Berita Terbaru */}
-
-
+
+ {/* TITLE */}
+
-
- {articles.length > 0 ? (
- articles.map((item) => (
-
-
-
-
-
- {item.categoryName ||
- item.categories?.[0]?.title ||
- "Umum"}
-
-
+ {/* GRID 4 KOLOM */}
+
+ {articles.slice(0, 4).map((item) => (
+
+
+ {/* GAMBAR */}
+
+
-
- {item.title}
-
-
-
-
- {new Date(item.createdAt).toLocaleDateString("id-ID", {
- day: "2-digit",
- month: "long",
- year: "numeric",
- })}
-
-
+ {/* BADGE CATEGORY DI DALAM GAMBAR */}
+
+
+ {item.categoryName || "Kategori"}
+
+
- ))
- ) : (
-
- Tidak ada artikel tersedia.
-
- )}
-
- {/* Pagination */}
-
-
+ {/* JUDUL */}
+
+ {item.title}
+
-
-
+ {/* AUTHOR + DATE */}
+
+
+ By {item.customCreatorName || item.createdByName || "Admin"}
+
+ -
+
+ {new Date(item.createdAt).toLocaleDateString("id-ID", {
+ day: "numeric",
+ month: "long",
+ year: "numeric",
+ })}
+
+
+
+
+ ))}
- {/* Twitter Section */}
-
-
- Twitter @ArahNegeri
-
- {/* Embed atau konten lain */}
+
+
-
- {/* Banner bawah */}
-
-
-
);
}
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index 536c77b..ee4753e 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -1,164 +1,126 @@
"use client";
-import { useState } from "react";
-import Link from "next/link";
-import { Menu, Lock, Search } from "lucide-react";
-import { Input } from "../ui/input";
+
+import { Search } from "lucide-react";
import Image from "next/image";
+import Link from "next/link";
-const Navbar = () => {
- const [isOpen, setIsOpen] = useState(false);
- const toggleMenu = () => setIsOpen(!isOpen);
-
+export default function Navbar() {
return (
-