diff --git a/app/category/citizen-news/page.tsx b/app/category/citizen-news/page.tsx new file mode 100644 index 0000000..c7b81e6 --- /dev/null +++ b/app/category/citizen-news/page.tsx @@ -0,0 +1,34 @@ +import Author from "@/components/landing-page/author"; +import HeaderCitizen from "@/components/landing-page/citizen-news/header-citizen"; +import Footer from "@/components/landing-page/footer"; +import Header from "@/components/landing-page/header"; +import Latest from "@/components/landing-page/latest"; +import LatestandPopular from "@/components/landing-page/latest-and-popular"; +import Navbar from "@/components/landing-page/navbar"; +import News from "@/components/landing-page/news"; +import Image from "next/image"; + +export default function Development() { + return ( +
+
+ Background +
+ +
+ +
+ +
+
+
+ ); +} diff --git a/app/category/development/page.tsx b/app/category/development/page.tsx new file mode 100644 index 0000000..9009167 --- /dev/null +++ b/app/category/development/page.tsx @@ -0,0 +1,30 @@ +import HeaderDevelopment from "@/components/landing-page/development/header-development"; +import Footer from "@/components/landing-page/footer"; + +import Navbar from "@/components/landing-page/navbar"; +import Image from "next/image"; + +export default function Development() { + return ( +
+
+ Background +
+ +
+ +
+ +
+
+
+ ); +} diff --git a/app/category/health/page.tsx b/app/category/health/page.tsx new file mode 100644 index 0000000..61cae3e --- /dev/null +++ b/app/category/health/page.tsx @@ -0,0 +1,34 @@ +import Author from "@/components/landing-page/author"; +import Footer from "@/components/landing-page/footer"; +import Header from "@/components/landing-page/header"; +import HeaderHealth from "@/components/landing-page/health/header-health"; +import Latest from "@/components/landing-page/latest"; +import LatestandPopular from "@/components/landing-page/latest-and-popular"; +import Navbar from "@/components/landing-page/navbar"; +import News from "@/components/landing-page/news"; +import Image from "next/image"; + +export default function Development() { + return ( +
+
+ Background +
+ +
+ +
+ +
+
+
+ ); +} diff --git a/app/popular/page.tsx b/app/category/popular/page.tsx similarity index 100% rename from app/popular/page.tsx rename to app/category/popular/page.tsx diff --git a/components/details/details-content.tsx b/components/details/details-content.tsx index 7497ad4..67c0ce4 100644 --- a/components/details/details-content.tsx +++ b/components/details/details-content.tsx @@ -3,8 +3,9 @@ import Image from "next/image"; import Author from "../landing-page/author"; import { useEffect, useState } from "react"; import Link from "next/link"; -import { getListArticle } from "@/service/article"; -import { close } from "@/config/swal"; +import { getArticleById, getListArticle } from "@/service/article"; +import { close, loading } from "@/config/swal"; +import { useParams } from "next/navigation"; type TabKey = "trending" | "comments" | "latest"; @@ -25,17 +26,35 @@ type Article = { }[]; }; +interface CategoryType { + id: number; + label: string; + value: number; +} + export default function DetailContent() { + const params = useParams(); + const id = params?.id; const [page, setPage] = useState(1); const [totalPage, setTotalPage] = useState(1); const [articles, setArticles] = useState([]); + const [articleDetail, setArticleDetail] = useState(null); const [showData, setShowData] = useState("5"); - const [search, setSearch] = useState(""); - const [selectedCategories, setSelectedCategories] = useState(""); + const [search, setSearch] = useState("-"); + const [listCategory, setListCategory] = useState([]); + const [selectedCategories, setSelectedCategories] = useState("-"); const [startDateValue, setStartDateValue] = useState({ startDate: null, endDate: null, }); + const [detailfiles, setDetailFiles] = useState([]); + const [mainImage, setMainImage] = useState(0); + const [thumbnail, setThumbnail] = useState("-"); + const [diseId, setDiseId] = useState(0); + const [thumbnailImg, setThumbnailImg] = useState([]); + const [selectedMainImage, setSelectedMainImage] = useState( + null + ); const [tabArticles, setTabArticles] = useState([]); @@ -55,8 +74,8 @@ export default function DetailContent() { const req = { limit: "5", page: 1, - search: "", - categorySlug: "", + search: "-", + categorySlug: "-", sort: "desc", sortBy: "created_at", }; @@ -145,11 +164,28 @@ export default function DetailContent() { // close(); } } + + useEffect(() => { + initStateData(); + }, [listCategory]); + + async function initStateData() { + loading(); + const res = await getArticleById(id); + const data = res.data?.data; + + setThumbnail(data?.thumbnailUrl); + setDiseId(data?.aiArticleId); + setDetailFiles(data?.files); + setArticleDetail(data); // <-- Add this + close(); + } + return ( <>
Background
-

Home > Internasional

+

Home {">"}Detail

- Bom Bunuh Diri Guncang Gereja di Damaskus, 20 Orang Tewas dan - Puluhan Terluka + {articleDetail?.title}

- author - - christine natalia +
+ + + + + + +
+ + + {articleDetail?.createdByName} • - 23 Juni 2025 + + + {new Date(articleDetail?.createdAt).toLocaleDateString( + "id-ID", + { + day: "numeric", + month: "long", + year: "numeric", + } + )} + + • - Internasional + {articleDetail?.categories?.[0]?.title}
- Berita + {articleDetail?.files?.[0]?.file_url ? ( + Berita + ) : ( +
+

Gambar tidak tersedia

+
+ )}

- Bom Bunuh Diri Guncang Gereja di Damaskus, 20 Orang Tewas dan - Puluhan Terluka + {articleDetail?.slug}

@@ -262,87 +326,32 @@ export default function DetailContent() {

- Sebuah aksi bom bunuh diri terjadi di Gereja Saint Elias, - kawasan Dwelaa, Damaskus, Suriah, pada Minggu (22/6), menewaskan - sedikitnya 20 orang dan melukai 52 lainnya. Insiden tragis ini - terjadi saat gereja tengah dipenuhi jemaat, termasuk anak-anak - dan lansia, yang sedang mengikuti ibadah mingguan. Kementerian - Dalam Negeri Suriah mengonfirmasi bahwa pelaku serangan - merupakan anggota kelompok teroris ISIS. Dalam keterangan resmi, - pihak kementerian menyebut pelaku memasuki gereja dengan membawa - senjata api, melepaskan tembakan, dan kemudian meledakkan diri - dengan sabuk peledak yang dibawanya. Pasca ledakan, aparat - keamanan langsung mengamankan lokasi dan menutup akses ke area - sekitar untuk mencegah kemungkinan serangan susulan. Pihak - berwenang juga mengerahkan tim penyelamat dan tenaga medis untuk - mengevakuasi korban dan memberikan perawatan darurat kepada yang - terluka. Kementerian Kesehatan, melalui kantor berita SANA, - menginformasikan bahwa sebagian besar korban luka mengalami - cedera serius akibat serpihan ledakan. Sejumlah korban masih - dalam kondisi kritis dan dirawat di beberapa rumah sakit rujukan - di Damaskus. Seorang saksi mata bernama Lawrence Maamari - menuturkan bahwa pelaku masuk ke dalam gereja dengan senapan di - tangan. Jemaat yang panik sempat mencoba menghadang pelaku - sebelum akhirnya terjadi ledakan. Saksi lainnya, Ziad (40), - pemilik toko di dekat lokasi, mengatakan mendengar suara - tembakan disusul ledakan besar. “Kami melihat kobaran api di - dalam gereja dan bangku-bangku terlempar ke arah pintu masuk,” - ujarnya. Suasana mencekam sempat terjadi selama beberapa jam. - Beberapa warga kehilangan anggota keluarga dan berupaya - mencarinya di antara puing-puing bangunan serta rumah sakit - terdekat. Insiden ini menuai kecaman internasional. Utusan - Khusus PBB untuk Suriah, Geir Pedersen, menyebut aksi tersebut - sebagai kejahatan keji dan mendesak adanya penyelidikan - menyeluruh. Sementara itu, Kementerian Luar Negeri Prancis - menyatakan bahwa serangan ini merupakan bentuk terorisme brutal, - serta kembali menyuarakan pentingnya transisi damai di Suriah - agar seluruh warga dapat hidup dalam keamanan tanpa - diskriminasi. Pemerintah Suriah menilai serangan ini sebagai - langkah terdesak dari kelompok radikal untuk mengganggu - stabilitas nasional dan menciptakan ketegangan sektarian. - Menteri Dalam Negeri, Anas Khattab, menyampaikan belasungkawa - kepada keluarga korban dan menyatakan bahwa penyelidikan sudah - dimulai oleh tim khusus kementeriannya. Dalam keterangannya, - Khattab menegaskan bahwa aksi teror serupa tidak akan - menghentikan tekad pemerintah dalam menciptakan perdamaian. Ia - juga mengungkapkan bahwa kelompok ISIS kini menargetkan - komunitas-komunitas tertentu, termasuk umat Kristen dan Syiah, - dengan pola serangan yang lebih terorganisir. Beberapa minggu - sebelumnya, aparat keamanan berhasil menggagalkan sejumlah - rencana serangan dan menangkap sel-sel ISIS di wilayah Damaskus. - Operasi kontra-terorisme di Aleppo bahkan menewaskan tiga - anggota kelompok tersebut dan satu petugas keamanan. Insiden bom - bunuh diri di Damaskus menjadi pengingat bahwa ancaman - ekstremisme belum sepenuhnya sirna di Suriah. Pemerintah pun - terus berupaya meningkatkan keamanan dan memperkuat kerja sama - dengan pihak internasional dalam memberantas terorisme. + + Mikulnews.com - + + + {articleDetail?.description}

-
+
Tags:
- {[ - "Bom bunuh diri Suriah", - "Bom Damaskus", - "Gereja Saint Elias", - "Serangan ISIS", - ].map((tag, index) => ( - - {tag} + {articleDetail?.tags ? ( + + {articleDetail.tags} - ))} + ) : ( + Tidak ada tag + )}
Berita Utama
Author
Iklan
Recommended Article
OPM Serang Gereja Denda Merokok Pengguna Internet { + const mapping: Record = { + development: "Pembangunan", + health: "Kesehatan", + "citizen-news": "Berita Warga", + }; + return mapping[slug] || slug.charAt(0).toUpperCase() + slug.slice(1); +}; + +export default function HeaderCitizen() { + const [page, setPage] = useState(1); + const [totalPage, setTotalPage] = useState(1); + const [articles, setArticles] = useState([]); + const [showData, setShowData] = useState("5"); + const [search, setSearch] = useState(""); + const [selectedCategories, setSelectedCategories] = useState(""); + const [startDateValue, setStartDateValue] = useState({ + startDate: null, + endDate: null, + }); + + const pathname = usePathname(); // e.g., "/category/development" + const pathSegments = pathname.split("/").filter(Boolean); // ["category", "development"] + + const categorySlug = pathSegments[1]; // "development" + const categoryLabel = slugToLabel(categorySlug); + + useEffect(() => { + initState(); + }, [page, showData, startDateValue, selectedCategories]); + + async function initState() { + // loading(); + const req = { + limit: showData, + page, + search, + categorySlug: Array.from(selectedCategories).join(","), + sort: "desc", + sortBy: "created_at", + }; + + try { + const res = await getListArticle(req); + setArticles(res?.data?.data || []); + setTotalPage(res?.data?.meta?.totalPage || 1); + } finally { + // close(); + } + } + + return ( +
+
+ Background +

+ + Home + {" "} + {">"} {categoryLabel} +

+

Berita Warga

+
+ +
+
+ {/* Gambar besar di kiri */} + {articles.length > 0 && ( +
+ + {articles[0].title} +
+ + {articles[0].categories?.[0]?.title || "TANPA KATEGORI"} + +

+ {articles[0].title} +

+

+ {articles[0].createdByName} -{" "} + {new Date(articles[0].createdAt).toLocaleDateString( + "id-ID", + { + day: "numeric", + month: "long", + year: "numeric", + } + )} +

+
+ +
+ )} + + {/* Dua gambar kecil di kanan */} +
+ {articles.slice(1, 3).map((article, index) => ( +
+ + {article.title} +
+ + {article.categoryName || "TANPA KATEGORI"} + +

+ {article.title} +

+
+ +
+ ))} +
+
+ +
+ Berita Utama +
+
+
+ ); +} diff --git a/components/landing-page/development/header-development.tsx b/components/landing-page/development/header-development.tsx new file mode 100644 index 0000000..88494d4 --- /dev/null +++ b/components/landing-page/development/header-development.tsx @@ -0,0 +1,176 @@ +"use client"; + +import { getListArticle } from "@/service/article"; +import { useEffect, useState } from "react"; +import Image from "next/image"; +import Link from "next/link"; +import { usePathname } from "next/navigation"; + +type Article = { + id: number; + title: string; + description: string; + categoryName: string; + createdAt: string; + createdByName: string; + thumbnailUrl: string; + categories: { + title: string; + }[]; + files: { + file_url: string; + file_alt: string; + }[]; +}; + +const slugToLabel = (slug: string) => { + const mapping: Record = { + development: "Pembangunan", + health: "Kesehatan", + "citizen-news": "Berita Warga", + }; + return mapping[slug] || slug.charAt(0).toUpperCase() + slug.slice(1); +}; + +export default function HeaderDevelopment() { + const [page, setPage] = useState(1); + const [totalPage, setTotalPage] = useState(1); + const [articles, setArticles] = useState([]); + const [showData, setShowData] = useState("5"); + const [search, setSearch] = useState(""); + const [selectedCategories, setSelectedCategories] = useState(""); + const [startDateValue, setStartDateValue] = useState({ + startDate: null, + endDate: null, + }); + + const pathname = usePathname(); // e.g., "/category/development" + const pathSegments = pathname.split("/").filter(Boolean); // ["category", "development"] + + const categorySlug = pathSegments[1]; // "development" + const categoryLabel = slugToLabel(categorySlug); + + useEffect(() => { + initState(); + }, [page, showData, startDateValue, selectedCategories]); + + async function initState() { + // loading(); + const req = { + limit: showData, + page, + search, + categorySlug: Array.from(selectedCategories).join(","), + sort: "desc", + sortBy: "created_at", + }; + + try { + const res = await getListArticle(req); + setArticles(res?.data?.data || []); + setTotalPage(res?.data?.meta?.totalPage || 1); + } finally { + // close(); + } + } + + return ( +
+
+ Background +

+ + Home + {" "} + {">"}{" "} + + Category + {" "} + {">"} {categoryLabel} +

+

Pembangunan

+
+ +
+
+ {/* Gambar besar di kiri */} + {articles.length > 0 && ( +
+ + {articles[0].title} +
+ + {articles[0].categories?.[0]?.title || "TANPA KATEGORI"} + +

+ {articles[0].title} +

+

+ {articles[0].createdByName} -{" "} + {new Date(articles[0].createdAt).toLocaleDateString( + "id-ID", + { + day: "numeric", + month: "long", + year: "numeric", + } + )} +

+
+ +
+ )} + + {/* Dua gambar kecil di kanan */} +
+ {articles.slice(1, 3).map((article, index) => ( +
+ + {article.title} +
+ + {article.categoryName || "TANPA KATEGORI"} + +

+ {article.title} +

+
+ +
+ ))} +
+
+ +
+
> +
+
+ ); +} diff --git a/components/landing-page/header.tsx b/components/landing-page/header.tsx index 84e90f4..77bd785 100644 --- a/components/landing-page/header.tsx +++ b/components/landing-page/header.tsx @@ -72,13 +72,13 @@ export default function HeroNewsSection() {
-
+
{articles.length > 0 && (
{articles.slice(1, 5).map((article, index) => (
- + { + const mapping: Record = { + development: "Pembangunan", + health: "Kesehatan", + "citizen-news": "Berita Warga", + }; + return mapping[slug] || slug.charAt(0).toUpperCase() + slug.slice(1); +}; + +export default function HeaderHealth() { + const [page, setPage] = useState(1); + const [totalPage, setTotalPage] = useState(1); + const [articles, setArticles] = useState([]); + const [showData, setShowData] = useState("5"); + const [search, setSearch] = useState(""); + const [selectedCategories, setSelectedCategories] = useState(""); + const [startDateValue, setStartDateValue] = useState({ + startDate: null, + endDate: null, + }); + + const pathname = usePathname(); // e.g., "/category/development" + const pathSegments = pathname.split("/").filter(Boolean); // ["category", "development"] + + const categorySlug = pathSegments[1]; // "development" + const categoryLabel = slugToLabel(categorySlug); + + useEffect(() => { + initState(); + }, [page, showData, startDateValue, selectedCategories]); + + async function initState() { + // loading(); + const req = { + limit: showData, + page, + search, + categorySlug: Array.from(selectedCategories).join(","), + sort: "desc", + sortBy: "created_at", + }; + + try { + const res = await getListArticle(req); + setArticles(res?.data?.data || []); + setTotalPage(res?.data?.meta?.totalPage || 1); + } finally { + // close(); + } + } + + return ( +
+
+ Background +

+ + Home + {" "} + {">"} {categoryLabel} +

+

Kesehatan

+
+ +
+
+ {/* Gambar besar di kiri */} + {articles.length > 0 && ( +
+ + {articles[0].title} +
+ + {articles[0].categories?.[0]?.title || "TANPA KATEGORI"} + +

+ {articles[0].title} +

+

+ {articles[0].createdByName} -{" "} + {new Date(articles[0].createdAt).toLocaleDateString( + "id-ID", + { + day: "numeric", + month: "long", + year: "numeric", + } + )} +

+
+ +
+ )} + + {/* Dua gambar kecil di kanan */} +
+ {articles.slice(1, 3).map((article, index) => ( +
+ + {article.title} +
+ + {article.categoryName || "TANPA KATEGORI"} + +

+ {article.title} +

+
+ +
+ ))} +
+
+ +
+ Berita Utama +
+
+
+ ); +} diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx index a899557..5865751 100644 --- a/components/landing-page/navbar.tsx +++ b/components/landing-page/navbar.tsx @@ -2,26 +2,43 @@ import { useState } from "react"; import Link from "next/link"; import { Menu, Lock, Search } from "lucide-react"; +import { usePathname } from "next/navigation"; const Navbar = () => { const [isOpen, setIsOpen] = useState(false); const toggleMenu = () => setIsOpen(!isOpen); + const pathname = usePathname(); + + const navLinks = [ + { href: "/", label: "BERANDA" }, + { href: "/category/development", label: "PEMBANGUNAN" }, + { href: "/category/health", label: "KESEHATAN" }, + { href: "/category/citizen-news", label: "BERITA WARGA" }, + ]; + + const isActive = (href: string) => { + if (href === "/") { + return pathname === "/"; + } + return pathname.startsWith(href); + }; + return (