From b449cab9ddfe055ae70cf727254164f75de3d7cd Mon Sep 17 00:00:00 2001 From: Anang Yusman Date: Thu, 3 Jul 2025 10:03:07 +0800 Subject: [PATCH] first commit --- app/detail/[id]/page.tsx | 30 + app/popular/page.tsx | 33 + components/details/details-content.tsx | 622 ++++++++++++++++++ components/landing-page/header.tsx | 109 +-- .../landing-page/latest-and-popular.tsx | 314 ++++----- components/landing-page/latest.tsx | 178 +++-- components/landing-page/news.tsx | 4 +- package-lock.json | 3 +- public/bom.png | Bin 0 -> 884433 bytes 9 files changed, 1040 insertions(+), 253 deletions(-) create mode 100644 app/detail/[id]/page.tsx create mode 100644 app/popular/page.tsx create mode 100644 components/details/details-content.tsx create mode 100644 public/bom.png diff --git a/app/detail/[id]/page.tsx b/app/detail/[id]/page.tsx new file mode 100644 index 0000000..6adfd1f --- /dev/null +++ b/app/detail/[id]/page.tsx @@ -0,0 +1,30 @@ +import DetailContent from "@/components/details/details-content"; +import Footer from "@/components/landing-page/footer"; +import Navbar from "@/components/landing-page/navbar"; +import Image from "next/image"; + +export default function Home() { + return ( +
+
+ Background +
+ +
+ +
+ +
+ +
+
+
+ ); +} diff --git a/app/popular/page.tsx b/app/popular/page.tsx new file mode 100644 index 0000000..3684a13 --- /dev/null +++ b/app/popular/page.tsx @@ -0,0 +1,33 @@ +import Author from "@/components/landing-page/author"; +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 Home() { + return ( +
+
+ Background +
+ +
+ +
+
+
+
+
+
+ ); +} diff --git a/components/details/details-content.tsx b/components/details/details-content.tsx new file mode 100644 index 0000000..7497ad4 --- /dev/null +++ b/components/details/details-content.tsx @@ -0,0 +1,622 @@ +"use client"; +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"; + +type TabKey = "trending" | "comments" | "latest"; + +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; + }[]; +}; + +export default function DetailContent() { + 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 [tabArticles, setTabArticles] = useState([]); + + const [activeTab, setActiveTab] = useState("trending"); + + const tabs: { id: TabKey; label: string }[] = [ + { id: "trending", label: "Trending" }, + { id: "comments", label: "Comments" }, + { id: "latest", label: "Latest" }, + ]; + + useEffect(() => { + fetchTabArticles(); + }, [activeTab]); + + async function fetchTabArticles() { + const req = { + limit: "5", + page: 1, + search: "", + categorySlug: "", + sort: "desc", + sortBy: "created_at", + }; + + try { + if (activeTab === "trending") { + req.sortBy = "view_count"; + } else if (activeTab === "comments") { + req.sortBy = "comment_count"; + } else { + req.sortBy = "created_at"; + } + + const res = await getListArticle(req); + setTabArticles(res?.data?.data || []); + } catch (error) { + console.error("Failed fetching tab articles:", error); + } + } + + const content: Record< + TabKey, + { image: string; title: string; date: string }[] + > = { + trending: [ + { + image: "/thumb1.png", + title: + "#StopBullyDiSekolah: Peran Positif Media Sosial dalam Mengatasi Bullying", + date: "22 FEBRUARI 2024", + }, + { + image: "/thumb2.png", + title: + "Polri Gelar Lomba Orasi Unjuk Rasa dalam Rangka Hari HAM Sedunia Berhadiah Total Lebih dari Rp 150 juta!", + date: "29 NOVEMBER 2021", + }, + { + image: "/thumb3.png", + title: "Tingkatkan Ibadah Sambut #RamadhanPenuhDamai", + date: "7 MARET 2024", + }, + { + image: "/thumb4.png", + title: + "Exploring the Charm of Papua’s Traditional Clothing: A Captivating and Meaningful Cultural Heritage", + date: "1 AGUSTUS 2024", + }, + ], + comments: [ + { + image: "/thumb-comment.png", + title: "Pengunjung Komentar Positif tentang Fitur Baru", + date: "3 JUNI 2024", + }, + ], + latest: [ + { + image: "/thumb-latest.png", + title: "Update Terbaru dari Redaksi Hari Ini", + date: "2 JULI 2025", + }, + ], + }; + + 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 > Internasional

+

+ Bom Bunuh Diri Guncang Gereja di Damaskus, 20 Orang Tewas dan + Puluhan Terluka +

+
+ author + + christine natalia + + • + 23 Juni 2025 + • + Internasional +
+ +
+ Berita +

+ Bom Bunuh Diri Guncang Gereja di Damaskus, 20 Orang Tewas dan + Puluhan Terluka +

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+
+

+ 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. +

+ +
+ + Tags: + +
+ {[ + "Bom bunuh diri Suriah", + "Bom Damaskus", + "Gereja Saint Elias", + "Serangan ISIS", + ].map((tag, index) => ( + + {tag} + + ))} +
+
+
+
+
+ Berita Utama +
+
+
+ Author +
+

+ christine natalia +

+
+
+ +

Tinggalkan Balasan

+

+ Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib + ditandai * +

+ +
+
+ +