623 lines
24 KiB
TypeScript
623 lines
24 KiB
TypeScript
"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<Article[]>([]);
|
||
const [showData, setShowData] = useState("5");
|
||
const [search, setSearch] = useState("");
|
||
const [selectedCategories, setSelectedCategories] = useState<any>("");
|
||
const [startDateValue, setStartDateValue] = useState({
|
||
startDate: null,
|
||
endDate: null,
|
||
});
|
||
|
||
const [tabArticles, setTabArticles] = useState<Article[]>([]);
|
||
|
||
const [activeTab, setActiveTab] = useState<TabKey>("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 (
|
||
<>
|
||
<div className="flex items-center bg-[#F2F4F3] w-full overflow-hidden mb-4 py-6 px-8">
|
||
<Image
|
||
src="/mikul.png"
|
||
alt="Background"
|
||
width={272}
|
||
height={90}
|
||
className="w-full md:w-[272px] h-[90px] object-cover border"
|
||
priority
|
||
/>
|
||
</div>
|
||
<div className="bg-white grid grid-cols-1 md:grid-cols-3 gap-6 px-8 py-8">
|
||
<div className="md:col-span-2">
|
||
<p className="text-sm text-gray-500 mb-2">Home > Internasional</p>
|
||
<h1 className="text-3xl md:text-4xl font-bold text-[#1a1a1a] leading-tight mb-4">
|
||
Bom Bunuh Diri Guncang Gereja di Damaskus, 20 Orang Tewas dan
|
||
Puluhan Terluka
|
||
</h1>
|
||
<div className="flex items-center space-x-2 text-sm text-gray-500 mb-4">
|
||
<Image
|
||
src="/author.png"
|
||
alt="author"
|
||
width={30}
|
||
height={30}
|
||
className="rounded-full"
|
||
/>
|
||
<span className="text-[#3ba6ed] font-medium">
|
||
christine natalia
|
||
</span>
|
||
<span>•</span>
|
||
<span>23 Juni 2025</span>
|
||
<span>•</span>
|
||
<span>Internasional</span>
|
||
</div>
|
||
|
||
<div className="w-full h-auto mb-6">
|
||
<Image
|
||
src="/bom.png"
|
||
alt="Berita"
|
||
width={800}
|
||
height={400}
|
||
className="rounded-lg w-full object-cover"
|
||
/>
|
||
<p className="text-sm text-gray-500 mt-2 text-end">
|
||
Bom Bunuh Diri Guncang Gereja di Damaskus, 20 Orang Tewas dan
|
||
Puluhan Terluka
|
||
</p>
|
||
</div>
|
||
<div className="flex relative">
|
||
<div className=" flex flex-col w-fit rounded overflow-hidden mr-5">
|
||
<Link
|
||
href="#"
|
||
aria-label="Facebook"
|
||
className="bg-[#3b5998] p-4 flex justify-center items-center"
|
||
>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
width="20"
|
||
height="20"
|
||
fill="white"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path 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="#"
|
||
aria-label="Twitter"
|
||
className="bg-[#55acee] p-4 flex justify-center items-center"
|
||
>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
width="20"
|
||
height="20"
|
||
fill="white"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path 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="#"
|
||
aria-label="Google"
|
||
className="bg-[#fce9e7] p-4 flex justify-center items-center text-white"
|
||
>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
width="20"
|
||
height="20"
|
||
fill="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path d="M7.796 14.333v-2.618h7.211c.066.382.12.763.12 1.265c0 4.364-2.923 7.462-7.33 7.462A7.63 7.63 0 0 1 .16 12.806a7.63 7.63 0 0 1 7.636-7.637c2.062 0 3.786.753 5.117 1.997L10.84 9.162c-.567-.546-1.56-1.178-3.044-1.178c-2.607 0-4.734 2.16-4.734 4.822s2.127 4.821 4.734 4.821c3.022 0 4.157-2.17 4.331-3.294zm13.27-2.6H23.2v2.134h-2.133V16h-2.134v-2.133H16.8v-2.134h2.133V9.6h2.134z" />
|
||
</svg>
|
||
</Link>
|
||
|
||
<Link
|
||
href="#"
|
||
aria-label="Share"
|
||
className="bg-[#cccccc] p-4 flex justify-center items-center text-white"
|
||
>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
width="20"
|
||
height="20"
|
||
fill="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path d="m21 12l-7-7v4C7 10 4 15 3 20c2.5-3.5 6-5.1 11-5.1V19z" />
|
||
</svg>
|
||
</Link>
|
||
</div>
|
||
<div className="flex-1 overflow-y-auto">
|
||
<p className="text-gray-700 leading-relaxed text-justify">
|
||
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.
|
||
</p>
|
||
<Author />
|
||
<div className=" flex flex-row gap-2 items-center">
|
||
<span className="font-semibold text-sm text-gray-700">
|
||
Tags:
|
||
</span>
|
||
<div className="flex flex-wrap gap-2 mt-1">
|
||
{[
|
||
"Bom bunuh diri Suriah",
|
||
"Bom Damaskus",
|
||
"Gereja Saint Elias",
|
||
"Serangan ISIS",
|
||
].map((tag, index) => (
|
||
<span
|
||
key={index}
|
||
className="bg-gray-100 text-gray-700 text-sm px-2 py-1 rounded"
|
||
>
|
||
{tag}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
|
||
<Image
|
||
src="/image-kolom.png"
|
||
alt="Berita Utama"
|
||
fill
|
||
className="object-contain"
|
||
/>
|
||
</div>
|
||
<div className="mt-10">
|
||
<div className="flex items-center space-x-4 p-4 border rounded-lg mb-6">
|
||
<Image
|
||
src="/author.png"
|
||
alt="Author"
|
||
width={60}
|
||
height={60}
|
||
className="rounded-full"
|
||
/>
|
||
<div>
|
||
<p className="text-green-600 font-bold text-lg">
|
||
christine natalia
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 className="text-2xl font-bold mb-2">Tinggalkan Balasan</h2>
|
||
<p className="text-gray-600 mb-4 text-sm">
|
||
Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib
|
||
ditandai <span className="text-green-600">*</span>
|
||
</p>
|
||
|
||
<form className="space-y-6 mt-6">
|
||
<div>
|
||
<label
|
||
htmlFor="komentar"
|
||
className="block text-sm font-medium mb-1"
|
||
>
|
||
Komentar <span className="text-green-600">*</span>
|
||
</label>
|
||
<textarea
|
||
id="komentar"
|
||
className="w-full border border-gray-300 rounded-md p-3 h-40 focus:outline-none focus:ring-2 focus:ring-green-600"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label
|
||
htmlFor="nama"
|
||
className="block text-sm font-medium mb-1"
|
||
>
|
||
Nama <span className="text-green-600">*</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="nama"
|
||
className="w-full border border-gray-300 rounded-md p-2"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label
|
||
htmlFor="email"
|
||
className="block text-sm font-medium mb-1"
|
||
>
|
||
Email <span className="text-green-600">*</span>
|
||
</label>
|
||
<input
|
||
type="email"
|
||
id="email"
|
||
className="w-full border border-gray-300 rounded-md p-2"
|
||
required
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label
|
||
htmlFor="website"
|
||
className="block text-sm font-medium mb-1"
|
||
>
|
||
Situs Web
|
||
</label>
|
||
<input
|
||
type="url"
|
||
id="website"
|
||
className="w-full border border-gray-300 rounded-md p-2"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-start space-x-2 mt-2">
|
||
<input type="checkbox" id="saveInfo" className="mt-1" />
|
||
<label htmlFor="saveInfo" className="text-sm text-gray-700">
|
||
Simpan nama, email, dan situs web saya pada peramban ini untuk
|
||
komentar saya berikutnya.
|
||
</label>
|
||
</div>
|
||
|
||
<p className="text-red-600 text-sm">
|
||
The reCAPTCHA verification period has expired. Please reload the
|
||
page.
|
||
</p>
|
||
|
||
<button
|
||
type="submit"
|
||
className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2"
|
||
>
|
||
KIRIM KOMENTAR
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="md:col-span-1 space-y-6">
|
||
<div className="sticky top-0 space-y-6">
|
||
<div className="bg-white shadow p-4 rounded-lg">
|
||
<Image
|
||
src="/kolom.png"
|
||
alt="Iklan"
|
||
width={345}
|
||
height={345}
|
||
className="rounded"
|
||
/>
|
||
<button className="mt-4 w-full bg-black text-white py-2 rounded hover:opacity-90">
|
||
Learn More
|
||
</button>
|
||
</div>
|
||
|
||
<div className="bg-white shadow p-4 rounded-lg">
|
||
<h2 className="text-lg font-semibold mb-2">Connect with us</h2>
|
||
<div className="flex space-x-2">
|
||
<div className="bg-[#0057ff] text-white px-3 py-2 rounded">
|
||
<p className="text-sm font-bold">Bē</p>
|
||
<p className="text-xs">139 Followers</p>
|
||
</div>
|
||
<div className="bg-[#ff0000] text-white px-3 py-2 rounded">
|
||
<p className="text-sm font-bold">YouTube</p>
|
||
<p className="text-xs">205k Subscribers</p>
|
||
</div>
|
||
<div className="bg-[#f9a825] text-white px-3 py-2 rounded">
|
||
<p className="text-sm font-bold">RSS</p>
|
||
<p className="text-xs">23.9k Followers</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="bg-white shadow p-4 rounded-lg">
|
||
<div className="flex space-x-4 border-b mb-4">
|
||
{tabs.map((tab) => (
|
||
<button
|
||
key={tab.id}
|
||
onClick={() => setActiveTab(tab.id)}
|
||
className={`pb-2 text-sm font-medium ${
|
||
activeTab === tab.id
|
||
? "border-b-2 border-green-600 text-green-600"
|
||
: "text-gray-600"
|
||
}`}
|
||
>
|
||
{tab.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
{tabArticles.map((item, idx) => (
|
||
<div key={idx} className="flex space-x-3">
|
||
<Image
|
||
src={item.thumbnailUrl || "/default-thumb.png"}
|
||
alt={item.title}
|
||
width={70}
|
||
height={70}
|
||
className="rounded w-[70px] h-[70px] object-cover"
|
||
/>
|
||
<div>
|
||
<p className="text-sm font-semibold leading-snug">
|
||
{item.title}
|
||
</p>
|
||
<p className="text-xs text-gray-500 mt-1">
|
||
{new Date(item.createdAt).toLocaleDateString("id-ID", {
|
||
day: "2-digit",
|
||
month: "long",
|
||
year: "numeric",
|
||
})}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-6">
|
||
<h3 className="text-base font-semibold mb-2 text-gray-800 border-b pb-1 border-green-600 inline-block">
|
||
Recommended
|
||
</h3>
|
||
|
||
<div className="space-y-4">
|
||
<div className="relative">
|
||
<Image
|
||
src="/gaza.png"
|
||
alt="Recommended Article"
|
||
width={400}
|
||
height={200}
|
||
className="rounded-lg w-full h-auto object-cover"
|
||
/>
|
||
<div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 text-white p-3 rounded-b-lg">
|
||
<p className="text-sm font-semibold leading-tight">
|
||
Bom Bunuh Diri Guncang Gereja di Damaskus, 20 Orang Tewas
|
||
dan Puluhan Terluka
|
||
</p>
|
||
<p className="text-xs text-gray-300 mt-1">
|
||
📅 23 JUNI 2025
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
<div className="flex space-x-3">
|
||
<Image
|
||
src="/perang.png"
|
||
alt="OPM Serang Gereja"
|
||
width={80}
|
||
height={60}
|
||
className="rounded object-cover w-[80px] h-[60px]"
|
||
/>
|
||
<div>
|
||
<p className="text-sm font-semibold leading-snug">
|
||
OPM Mulai Kehilangan Simpati dari Masyarakat Papua Usai
|
||
Serang Gereja
|
||
</p>
|
||
<p className="text-xs text-gray-500 mt-1">
|
||
📅 15 JUNI 2025
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex space-x-3">
|
||
<Image
|
||
src="/jateng.png"
|
||
alt="Denda Merokok"
|
||
width={80}
|
||
height={60}
|
||
className="rounded object-cover w-[80px] h-[60px]"
|
||
/>
|
||
<div>
|
||
<p className="text-sm font-semibold leading-snug">
|
||
Jakarta Terapkan Denda Rp 250.000 bagi Warga yang
|
||
Merokok Sembarangan
|
||
</p>
|
||
<p className="text-xs text-gray-500 mt-1">
|
||
📅 13 JUNI 2025
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex space-x-3">
|
||
<Image
|
||
src="/investasi.jpg"
|
||
alt="Pengguna Internet"
|
||
width={80}
|
||
height={60}
|
||
className="rounded object-cover w-[80px] h-[60px]"
|
||
/>
|
||
<div>
|
||
<p className="text-sm font-semibold leading-snug">
|
||
Warga Indonesia Jadi Pengguna Internet via Ponsel
|
||
Terbanyak di Dunia
|
||
</p>
|
||
<p className="text-xs text-gray-500 mt-1">
|
||
📅 26 MEI 2025
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|