diff --git a/app/category/economy/page.tsx b/app/category/economy/page.tsx index 197248f..3912f2c 100644 --- a/app/category/economy/page.tsx +++ b/app/category/economy/page.tsx @@ -5,7 +5,7 @@ import Navbar from "@/components/landing-page/navbar"; export default function EconomyPage() { return (
-
+
diff --git a/app/category/expert-narrative/page.tsx b/app/category/expert-narrative/page.tsx index 00d6637..d41c6b6 100644 --- a/app/category/expert-narrative/page.tsx +++ b/app/category/expert-narrative/page.tsx @@ -5,7 +5,7 @@ import Navbar from "@/components/landing-page/navbar"; export default function NarrativePage() { return (
-
+
diff --git a/app/category/health/page.tsx b/app/category/health/page.tsx index 2f335c4..94f54dc 100644 --- a/app/category/health/page.tsx +++ b/app/category/health/page.tsx @@ -5,7 +5,7 @@ import Navbar from "@/components/landing-page/navbar"; export default function HealthPage() { return (
-
+
diff --git a/app/page.tsx b/app/page.tsx index 79299bd..33b2299 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,7 +1,12 @@ +import Development from "@/components/landing-page/development"; import Footer from "@/components/landing-page/footer"; 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 Beranda from "@/components/landing-page/news"; +import News 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() { return ( @@ -10,7 +15,11 @@ export default function Home() {
- + + + + +
); diff --git a/components/details/details-content.tsx b/components/details/details-content.tsx index f326bce..785a421 100644 --- a/components/details/details-content.tsx +++ b/components/details/details-content.tsx @@ -82,7 +82,7 @@ export default function DetailContent() { const [diseId, setDiseId] = useState(0); const [thumbnailImg, setThumbnailImg] = useState([]); const [selectedMainImage, setSelectedMainImage] = useState( - null + null, ); const [selectedIndex, setSelectedIndex] = useState(0); @@ -281,7 +281,7 @@ export default function DetailContent() {
-
+
- + {articleDetail?.customCreatorName || articleDetail?.createdByName} @@ -309,12 +309,19 @@ export default function DetailContent() { {new Date( - articleDetail?.publishedAt ?? articleDetail?.createdAt - ).toLocaleDateString("id-ID", { - day: "numeric", - month: "long", - year: "numeric", - })} + articleDetail?.publishedAt ?? articleDetail?.createdAt, + ) + .toLocaleString("id-ID", { + day: "numeric", + month: "long", + year: "numeric", + hour: "2-digit", + minute: "2-digit", + hour12: false, + timeZone: "Asia/Jakarta", + }) + .replace("pukul ", "")}{" "} + WIB in @@ -731,7 +738,7 @@ export default function DetailContent() { day: "2-digit", month: "long", year: "numeric", - } + }, )} 💬 0 diff --git a/components/landing-page/development.tsx b/components/landing-page/development.tsx new file mode 100644 index 0000000..5f8c521 --- /dev/null +++ b/components/landing-page/development.tsx @@ -0,0 +1,136 @@ +"use client"; +import { useEffect, useState } from "react"; +import Image from "next/image"; +import { getListArticle } from "@/service/article"; +import Link from "next/link"; + +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 Development() { + const [articles, setArticles] = useState([]); + const [page, setPage] = useState(1); + const [totalPage, setTotalPage] = useState(1); + + useEffect(() => { + initState(); + }, [page]); + + async function initState() { + const req = { + limit: "10", + page, + search: "", + categorySlug: "", + 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); + } + } + + // Format tanggal ke gaya lokal + const formatDate = (dateString: string) => { + const date = new Date(dateString); + return date.toLocaleDateString("id-ID", { + day: "2-digit", + month: "long", + year: "numeric", + }); + }; + + // Mapping struktur seperti dummy sebelumnya + 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); + + return ( +
+
+
+

JAGA NEGERI

+ +
+
+ +
+ +
+ {articles.slice(0, 6).map((item) => ( + +
+ {item.title} +
+ +
+

+ + BERITA OPINI + +

+ +

+ {item.title} +

+ +

+ By{" "} + + {item.customCreatorName} + +

+ +

+ {new Date(item.publishedAt).toLocaleDateString("id-ID", { + day: "numeric", + month: "long", + year: "numeric", + })} +

+
+ + ))} +
+
+ Berita Utama +
+
+
+ ); +} diff --git a/components/landing-page/footer.tsx b/components/landing-page/footer.tsx index d5f551a..c9288bd 100644 --- a/components/landing-page/footer.tsx +++ b/components/landing-page/footer.tsx @@ -1,84 +1,66 @@ // 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() { return ( -