444 lines
20 KiB
TypeScript
444 lines
20 KiB
TypeScript
import Image from "next/image";
|
||
|
||
const data1 = {
|
||
main: {
|
||
image: "/jumbo.png",
|
||
category: "BERANDA",
|
||
title:
|
||
"Industri Animasi Indonesia Melesat: “Jumbo” Masuk Daftar Film Terlaris Sepanjang Masa",
|
||
author: "christine natalia",
|
||
date: "10 MARET 2025",
|
||
comments: 0,
|
||
excerpt:
|
||
"Mikulnews.com - Industri film animasi Indonesia menunjukkan kemajuan signifikan dalam beberapa tahun terakhir. Tak hanya sukses dari sisi kreativitas dan produksi,...",
|
||
},
|
||
left: [
|
||
{
|
||
image: "/jumbo.png",
|
||
category: "BERANDA",
|
||
title:
|
||
"Industri Animasi Indonesia Melesat: “Jumbo” Masuk Daftar Film Terlaris Sepanjang Masa",
|
||
author: "christine natalia",
|
||
date: "10 MARET 2025",
|
||
comments: 0,
|
||
excerpt:
|
||
"Mikulnews.com - Industri film animasi Indonesia menunjukkan kemajuan signifikan dalam beberapa tahun terakhir. Tak hanya sukses dari sisi kreativitas dan produksi,...",
|
||
},
|
||
],
|
||
topRight: [
|
||
{
|
||
image: "/bimantoro.png",
|
||
category: "BERANDA",
|
||
title:
|
||
"Bimantoro Wiyono Apresiasi Keberhasilan Atur Mudik dan Arus Balik Lebaran 2025",
|
||
author: "SALMA HN",
|
||
date: "10 MARET 2025",
|
||
comments: 0,
|
||
excerpt:
|
||
"Jakarta - Rekrutmen Bersama BUMN (RBB BUMN) 2025 kini resmi dibuka mulai hari ini, Senin, 10 Maret 2025. Pelamar yang...",
|
||
},
|
||
],
|
||
topRightMain: [
|
||
{
|
||
image: "/bimantoro.png",
|
||
category: "BERANDA",
|
||
title:
|
||
"Bimantoro Wiyono Apresiasi Keberhasilan Atur Mudik dan Arus Balik Lebaran 2025",
|
||
author: "SALMA HN",
|
||
date: "10 MARET 2025",
|
||
comments: 0,
|
||
excerpt:
|
||
"Jakarta - Rekrutmen Bersama BUMN (RBB BUMN) 2025 kini resmi dibuka mulai hari ini, Senin, 10 Maret 2025. Pelamar yang...",
|
||
},
|
||
{
|
||
image: "/cpns.jpg",
|
||
category: "BERANDA",
|
||
title:
|
||
"Polri Dapat Meningkatkan Transparansi: Paparan Fathul Ulum tentang Keterbukaan Informasi",
|
||
author: "SALMA HN",
|
||
date: "7 MARET 2025",
|
||
comments: 0,
|
||
excerpt:
|
||
"JAKARTA - Program Rekrutmen Bersama BUMN (RBB) 2025 resmi dibuka pada Jumat...",
|
||
},
|
||
{
|
||
image: "/bpnt.jpg",
|
||
category: "BERANDA",
|
||
title: "Tutorial Cek Status Penerima BPNT 2025 Melalui HP",
|
||
author: "SALMA HN",
|
||
date: "7 MARET 2025",
|
||
comments: 0,
|
||
excerpt:
|
||
"JAKARTA - Program Rekrutmen Bersama BUMN (RBB) 2025 resmi dibuka pada Jumat...",
|
||
},
|
||
],
|
||
bottomMid: [
|
||
{
|
||
image: "/vvip.jpg",
|
||
title:
|
||
"Pembangunan Bandara VVIP IKN Berjalan Lancar, Ditargetkan Rampung Maret 2025",
|
||
date: "6 MARET 2025",
|
||
},
|
||
{
|
||
image: "/pmk.png",
|
||
title: "PMK 11/2025 Ubah Ketentuan PPN Besaran Tertentu, Ini Rinciannya",
|
||
date: "11 FEBRUARI 2025",
|
||
},
|
||
{
|
||
image: "/cpns.jpg",
|
||
title:
|
||
"Hasil Kelulusan CPNS 2024 Diumumkan, Simak Arti Kode dan Cara Mengecek Hasilnya",
|
||
date: "17 FEBRUARI 2025",
|
||
},
|
||
],
|
||
bottomRightData: [
|
||
{
|
||
image: "/iums.png",
|
||
category: "INTERNASIONAL",
|
||
title:
|
||
"IUMS Serukan Boikot Produk Pendukung Israel, PMII Rilis Daftar Merek Terkait",
|
||
author: "christine natalia",
|
||
date: "10 MARET 2025",
|
||
comments: 0,
|
||
excerpt:
|
||
"Mikulnews.com - Persatuan Cendekiawan Muslim Internasional atau International Union of Muslim Scholars (IUMS) yang berbasis di Qatar mengeluarkan fatwa terkait konflik...",
|
||
},
|
||
{
|
||
image: "/jateng.png",
|
||
category: "INTERNASIONAL",
|
||
title:
|
||
"Tiga Polisi Jaga Tahanan di Polda Jateng Ditahan Akibat Dugaan Pungli",
|
||
author: "christine natalia",
|
||
date: "10 MARET 2025",
|
||
comments: 0,
|
||
excerpt:
|
||
"Mikulnews.com - Persatuan Cendekiawan Muslim Internasional atau International Union of Muslim Scholars (IUMS) yang berbasis di Qatar mengeluarkan fatwa terkait konflik...",
|
||
},
|
||
{
|
||
image: "/perang.png",
|
||
category: "INTERNASIONAL",
|
||
title:
|
||
"Perang Dagang AS-China Meningkat, Indonesia Terancam Tekanan Ekonomi Ganda",
|
||
author: "christine natalia",
|
||
date: "10 MARET 2025",
|
||
comments: 0,
|
||
excerpt:
|
||
"Mikulnews.com - Persatuan Cendekiawan Muslim Internasional atau International Union of Muslim Scholars (IUMS) yang berbasis di Qatar mengeluarkan fatwa terkait konflik...",
|
||
},
|
||
{
|
||
image: "/gaza.png",
|
||
category: "INTERNASIONAL",
|
||
title:
|
||
"Fatwa Ulama Dunia Serukan Blokade Total Terhadap Israel Demi Bela Gaza",
|
||
author: "christine natalia",
|
||
date: "10 MARET 2025",
|
||
comments: 0,
|
||
excerpt:
|
||
"Mikulnews.com - Persatuan Cendekiawan Muslim Internasional atau International Union of Muslim Scholars (IUMS) yang berbasis di Qatar mengeluarkan fatwa terkait konflik...",
|
||
},
|
||
],
|
||
bottomRight: [
|
||
{
|
||
image: "/iums.png",
|
||
category: "INTERNASIONAL",
|
||
title:
|
||
"IUMS Serukan Boikot Produk Pendukung Israel, PMII Rilis Daftar Merek Terkait",
|
||
author: "christine natalia",
|
||
date: "10 MARET 2025",
|
||
comments: 0,
|
||
excerpt:
|
||
"Mikulnews.com - Persatuan Cendekiawan Muslim Internasional atau International Union of Muslim Scholars (IUMS) yang berbasis di Qatar mengeluarkan fatwa terkait konflik...",
|
||
},
|
||
],
|
||
};
|
||
|
||
// Disusun ulang agar cocok dengan struktur komponen
|
||
const data = {
|
||
leftMain: data1.main,
|
||
leftList: data1.left,
|
||
bottomRightList: data1.bottomRightData,
|
||
centerMain: data1.topRight[0],
|
||
centerList: data1.bottomMid.slice(0, 3),
|
||
rightMain: data1.topRightMain[0],
|
||
rightList: data1.bottomRight.slice(0, 3),
|
||
};
|
||
|
||
export default function LatestandPopular() {
|
||
return (
|
||
<section className="bg-white py-10 px-4 md:px-10 w-full">
|
||
<div className="max-w-screen-6xl mx-auto flex flex-col lg:flex-row lg:justify-between gap-5">
|
||
{/* Left: News Section */}
|
||
<div className="w-full lg:w-[750px]">
|
||
<h2 className="text-sm border-b-2 border-gray-300 font-bold mb-4">
|
||
Latest Post
|
||
</h2>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 ">
|
||
{/* === LEFT COLUMN === */}
|
||
<div className=" w-full">
|
||
{data.leftList.map((item, i) => (
|
||
<div key={i}>
|
||
<div className="relative w-full aspect-video mb-5">
|
||
<Image
|
||
src={item.image}
|
||
alt={item.title}
|
||
fill
|
||
sizes="(max-width: 1024px) 100vw, 33vw"
|
||
className="object-cover"
|
||
/>
|
||
<div className="absolute inset-0 bg-black/20" />
|
||
<span className="absolute bottom-1 left-1 bg-[#FFC600] text-black text-[11px] px-2 py-1 uppercase">
|
||
{item.category}
|
||
</span>
|
||
</div>
|
||
<div className=" text-black">
|
||
<h3 className=" font-semibold text-base mb-1">
|
||
{item.title}
|
||
</h3>
|
||
|
||
<p className="text-[#999999] text-sm font-serif">
|
||
{item.excerpt}
|
||
</p>
|
||
<p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
|
||
by <span className="text-[#31942E]">{item?.author}</span>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<g fill="none">
|
||
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
|
||
<path
|
||
fill="currentColor"
|
||
d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m0 2a1 1 0 0 1 .993.883L13 7v4.586l2.707 2.707a1 1 0 0 1-1.32 1.497l-.094-.083l-3-3a1 1 0 0 1-.284-.576L11 12V7a1 1 0 0 1 1-1"
|
||
/>
|
||
</g>
|
||
</svg>{" "}
|
||
{item.date}{" "}
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="h-4 w-4"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke="currentColor"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
|
||
/>
|
||
</svg>{" "}
|
||
0{" "}
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 32 32"
|
||
>
|
||
<path
|
||
fill="currentColor"
|
||
d="M16 8C7.664 8 1.25 15.344 1.25 15.344L.656 16l.594.656s5.848 6.668 13.625 7.282c.371.046.742.062 1.125.062s.754-.016 1.125-.063c7.777-.613 13.625-7.28 13.625-7.28l.594-.657l-.594-.656S24.336 8 16 8m0 2c2.203 0 4.234.602 6 1.406A6.9 6.9 0 0 1 23 15a6.995 6.995 0 0 1-6.219 6.969c-.02.004-.043-.004-.062 0c-.239.011-.477.031-.719.031c-.266 0-.523-.016-.781-.031A6.995 6.995 0 0 1 9 15c0-1.305.352-2.52.969-3.563h-.031C11.717 10.617 13.773 10 16 10m0 2a3 3 0 1 0 .002 6.002A3 3 0 0 0 16 12m-8.75.938A9 9 0 0 0 7 15c0 1.754.5 3.395 1.375 4.781A23.2 23.2 0 0 1 3.531 16a24 24 0 0 1 3.719-3.063zm17.5 0A24 24 0 0 1 28.469 16a23.2 23.2 0 0 1-4.844 3.781A8.93 8.93 0 0 0 25 15c0-.715-.094-1.398-.25-2.063z"
|
||
/>
|
||
</svg>{" "}
|
||
19
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* === RIGHT COLUMN === */}
|
||
<div className=" w-full">
|
||
{data.rightList.map((item, i) => (
|
||
<div key={i}>
|
||
<div className="relative w-full aspect-video mb-5">
|
||
<Image
|
||
src={item.image}
|
||
alt={item.title}
|
||
fill
|
||
sizes="(max-width: 1024px) 100vw, 33vw"
|
||
className="object-cover"
|
||
/>
|
||
<div className="absolute inset-0 bg-black/20" />
|
||
<span className="absolute bottom-1 left-1 bg-[#FFC600] text-black text-[11px] px-2 py-1 uppercase">
|
||
{item.category}
|
||
</span>
|
||
</div>
|
||
<div className=" text-black">
|
||
<h3 className=" font-semibold text-base mb-1">
|
||
{item.title}
|
||
</h3>
|
||
|
||
<p className="text-[#999999] text-sm font-serif">
|
||
{item.excerpt}
|
||
</p>
|
||
<p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
|
||
by <span className="text-[#31942E]">{item?.author}</span>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<g fill="none">
|
||
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
|
||
<path
|
||
fill="currentColor"
|
||
d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m0 2a1 1 0 0 1 .993.883L13 7v4.586l2.707 2.707a1 1 0 0 1-1.32 1.497l-.094-.083l-3-3a1 1 0 0 1-.284-.576L11 12V7a1 1 0 0 1 1-1"
|
||
/>
|
||
</g>
|
||
</svg>{" "}
|
||
{item.date}{" "}
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="h-4 w-4"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke="currentColor"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
|
||
/>
|
||
</svg>{" "}
|
||
0{" "}
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 32 32"
|
||
>
|
||
<path
|
||
fill="currentColor"
|
||
d="M16 8C7.664 8 1.25 15.344 1.25 15.344L.656 16l.594.656s5.848 6.668 13.625 7.282c.371.046.742.062 1.125.062s.754-.016 1.125-.063c7.777-.613 13.625-7.28 13.625-7.28l.594-.657l-.594-.656S24.336 8 16 8m0 2c2.203 0 4.234.602 6 1.406A6.9 6.9 0 0 1 23 15a6.995 6.995 0 0 1-6.219 6.969c-.02.004-.043-.004-.062 0c-.239.011-.477.031-.719.031c-.266 0-.523-.016-.781-.031A6.995 6.995 0 0 1 9 15c0-1.305.352-2.52.969-3.563h-.031C11.717 10.617 13.773 10 16 10m0 2a3 3 0 1 0 .002 6.002A3 3 0 0 0 16 12m-8.75.938A9 9 0 0 0 7 15c0 1.754.5 3.395 1.375 4.781A23.2 23.2 0 0 1 3.531 16a24 24 0 0 1 3.719-3.063zm17.5 0A24 24 0 0 1 28.469 16a23.2 23.2 0 0 1-4.844 3.781A8.93 8.93 0 0 0 25 15c0-.715-.094-1.398-.25-2.063z"
|
||
/>
|
||
</svg>{" "}
|
||
19
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
|
||
<Image
|
||
src="/image-kolom.png"
|
||
alt="Berita Utama"
|
||
fill
|
||
className="object-cover"
|
||
/>
|
||
</div>
|
||
<div className="flex justify-center items-center space-x-2 pt-6">
|
||
<button className="px-3 py-1 border text-white rounded bg-[#31942E]">
|
||
1
|
||
</button>
|
||
<button className="px-3 py-1 border border-gray-300 text-black rounded hover:bg-gray-100">
|
||
2
|
||
</button>
|
||
<button className="px-3 py-1 border border-gray-300 text-black rounded hover:bg-gray-100">
|
||
3
|
||
</button>
|
||
<span className="text-gray-400">…</span>
|
||
<button className="px-3 py-1 border border-gray-300 text-black rounded hover:bg-gray-100">
|
||
19
|
||
</button>
|
||
<button className="px-3 py-1 border border-gray-300 text-black rounded hover:bg-gray-100">
|
||
>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<aside className="w-full lg:w-[345px]">
|
||
<div className="">
|
||
<h2 className="text-sm border-b-2 border-gray-300 font-bold mb-4">
|
||
Most Popular
|
||
</h2>
|
||
<div className=" w-full">
|
||
<div className="relative w-full aspect-video mb-5">
|
||
<Image
|
||
src={data1.main.image}
|
||
alt={data1.main.title}
|
||
fill
|
||
sizes="(max-width: 1024px) 100vw, 33vw"
|
||
className="object-cover"
|
||
/>
|
||
<div className="absolute inset-0 bg-black/30" />
|
||
<div className="absolute bottom-0.5 left-2 text-white">
|
||
<h3 className=" font-semibold text-base mb-1">
|
||
{data1.main.title}
|
||
</h3>
|
||
<p className=" text-xs mb-2 flex items-center gap-2">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<g fill="none">
|
||
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
|
||
<path
|
||
fill="currentColor"
|
||
d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m0 2a1 1 0 0 1 .993.883L13 7v4.586l2.707 2.707a1 1 0 0 1-1.32 1.497l-.094-.083l-3-3a1 1 0 0 1-.284-.576L11 12V7a1 1 0 0 1 1-1"
|
||
/>
|
||
</g>
|
||
</svg>{" "}
|
||
{data1.main.date}{" "}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-5">
|
||
{data.bottomRightList.map((item, i) => (
|
||
<div key={i} className="flex gap-3">
|
||
<div className="relative w-[120px] h-[86px] shrink-0">
|
||
<Image
|
||
src={item.image}
|
||
alt={item.title}
|
||
fill
|
||
className="object-cover"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<h4 className="text-sm font-semibold mb-3">
|
||
{item.title}
|
||
</h4>
|
||
<p className="text-xs text-gray-500 flex gap-2 items-center">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<g fill="none">
|
||
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
|
||
<path
|
||
fill="currentColor"
|
||
d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m0 2a1 1 0 0 1 .993.883L13 7v4.586l2.707 2.707a1 1 0 0 1-1.32 1.497l-.094-.083l-3-3a1 1 0 0 1-.284-.576L11 12V7a1 1 0 0 1 1-1"
|
||
/>
|
||
</g>
|
||
</svg>{" "}
|
||
{item.date}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-4 my-6">
|
||
<div className="flex-1 h-px bg-gray-300" />
|
||
<p className="text-center border px-2 py-2 w-[110px] text-xs font-medium cursor-pointer">
|
||
LOAD MORE
|
||
</p>
|
||
<div className="flex-1 h-px bg-gray-300" />
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|