185 lines
6.8 KiB
TypeScript
185 lines
6.8 KiB
TypeScript
"use client";
|
||
|
||
import { Clock } from "lucide-react";
|
||
import Image from "next/image";
|
||
|
||
const popularPosts = [
|
||
{
|
||
id: 1,
|
||
image: "/presiden.jpg",
|
||
category: "BERANDA",
|
||
title: "Presiden Prabowo Lantik 31 Duta Besar Baru",
|
||
excerpt:
|
||
"JAKARTA - Pada Senin (24/3) petang, Presiden Republik Indonesia, Prabowo Subianto, melantik 31 Duta Besar Luar Biasa dan Berkuasa Penuh...",
|
||
author: "SALMA HASNA",
|
||
date: "25 MARET 2025",
|
||
comments: 0,
|
||
},
|
||
{
|
||
id: 2,
|
||
image: "/bkn.jpg",
|
||
category: "BERANDA",
|
||
title:
|
||
"BKN Perkuat Keamanan Layanan Digital ASN dengan Multi-Factor Authentication",
|
||
excerpt:
|
||
"Jakarta – Badan Kepegawaian Negara (BKN) terus meningkatkan keamanan layanan digital bagi Aparatur Sipil Negara (ASN) dengan menerapkan sistem verifikasi...",
|
||
author: "SALMA HASNA",
|
||
date: "24 MARET 2025",
|
||
comments: 0,
|
||
},
|
||
{
|
||
id: 3,
|
||
image: "/snbp.jpg",
|
||
category: "BERANDA",
|
||
title: "Presiden Prabowo Lantik 31 Duta Besar Baru",
|
||
excerpt:
|
||
"JAKARTA - Pada Senin (24/3) petang, Presiden Republik Indonesia, Prabowo Subianto, melantik 31 Duta Besar Luar Biasa dan Berkuasa Penuh...",
|
||
author: "SALMA HASNA",
|
||
date: "25 MARET 2025",
|
||
comments: 0,
|
||
},
|
||
{
|
||
id: 4,
|
||
image: "",
|
||
category: "BERANDA",
|
||
title:
|
||
"BKN Perkuat Keamanan Layanan Digital ASN dengan Multi-Factor Authentication",
|
||
excerpt:
|
||
"Jakarta – Badan Kepegawaian Negara (BKN) terus meningkatkan keamanan layanan digital bagi Aparatur Sipil Negara (ASN) dengan menerapkan sistem verifikasi...",
|
||
author: "SALMA HASNA",
|
||
date: "24 MARET 2025",
|
||
comments: 0,
|
||
},
|
||
{
|
||
id: 5,
|
||
image: "/bpi.jpg",
|
||
category: "BERANDA",
|
||
title: "Presiden Prabowo Lantik 31 Duta Besar Baru",
|
||
excerpt:
|
||
"JAKARTA - Pada Senin (24/3) petang, Presiden Republik Indonesia, Prabowo Subianto, melantik 31 Duta Besar Luar Biasa dan Berkuasa Penuh...",
|
||
author: "SALMA HASNA",
|
||
date: "25 MARET 2025",
|
||
comments: 0,
|
||
},
|
||
{
|
||
id: 6,
|
||
image: "/pkp.jpg",
|
||
category: "BERANDA",
|
||
title:
|
||
"BKN Perkuat Keamanan Layanan Digital ASN dengan Multi-Factor Authentication",
|
||
excerpt:
|
||
"Jakarta – Badan Kepegawaian Negara (BKN) terus meningkatkan keamanan layanan digital bagi Aparatur Sipil Negara (ASN) dengan menerapkan sistem verifikasi...",
|
||
author: "SALMA HASNA",
|
||
date: "24 MARET 2025",
|
||
comments: 0,
|
||
},
|
||
];
|
||
|
||
export default function Popular() {
|
||
return (
|
||
<section className="max-w-7xl mx-auto px-4 py-8">
|
||
<div className="relative mb-10 h-[120px] sm:h-[160px] md:h-[188px] overflow-hidden flex items-center mx-auto border">
|
||
<Image
|
||
src="/image-kolom.png"
|
||
alt="Berita Utama"
|
||
fill
|
||
className="object-contain"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 gap-4 border-b-2">
|
||
<h2 className="text-lg sm:text-md font-serif font-semibold border-b-2 border-blue-700 inline-block pb-1">
|
||
BERITA TERPOPULER
|
||
</h2>
|
||
<div className="flex flex-wrap gap-2 text-xs text-gray-600 uppercase font-medium">
|
||
<button className="hover:text-blue-700">All</button>
|
||
<button className="hover:text-blue-700">HUMAS.POLRI.GO.ID</button>
|
||
<button className="hover:text-blue-700">TNI.MIL.ID</button>
|
||
<button className="hover:text-blue-700">COVID19.GO.ID</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-8">
|
||
{popularPosts.map((post) => (
|
||
<div
|
||
key={post.id}
|
||
className={`flex gap-4 ${
|
||
post.image ? "flex-col md:flex-row" : "flex-col"
|
||
}`}
|
||
>
|
||
<div className="flex-1">
|
||
<h3 className="text-base sm:text-lg md:text-xl font-bold leading-tight">
|
||
{post.title}
|
||
</h3>
|
||
<div className="text-xs mt-1.5 mb-2 text-gray-600 space-x-2 flex items-center">
|
||
<span>
|
||
BY{" "}
|
||
<span className="text-blue-700 font-semibold">
|
||
{post.author}
|
||
</span>
|
||
</span>
|
||
<Clock className="w-3 h-3 text-blue-500" />
|
||
<span> {post.date}</span>
|
||
<div className="text-blue-500">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
width="13"
|
||
height="13"
|
||
viewBox="0 0 1792 1536"
|
||
>
|
||
<path
|
||
fill="currentColor"
|
||
d="M896 128q-204 0-381.5 69.5T232.5 385T128 640q0 112 71.5 213.5T401 1029l87 50l-27 96q-24 91-70 172q152-63 275-171l43-38l57 6q69 8 130 8q204 0 381.5-69.5t282-187.5T1664 640t-104.5-255t-282-187.5T896 128m896 512q0 174-120 321.5t-326 233t-450 85.5q-70 0-145-8q-198 175-460 242q-49 14-114 22h-5q-15 0-27-10.5t-16-27.5v-1q-3-4-.5-12t2-10t4.5-9.5l6-9l7-8.5l8-9q7-8 31-34.5t34.5-38t31-39.5t32.5-51t27-59t26-76q-157-89-247.5-220T0 640q0-174 120-321.5t326-233T896 0t450 85.5t326 233T1792 640"
|
||
/>
|
||
</svg>{" "}
|
||
</div>
|
||
<span>{post.comments}</span>
|
||
</div>
|
||
<p className="text-[15px] text-[#5A515E] line-clamp-2 mb-3">
|
||
{post.excerpt}
|
||
</p>
|
||
<button className="border px-3 py-1.5 text-sm hover:shadow font-medium text-gray-800">
|
||
READ MORE
|
||
</button>
|
||
</div>
|
||
|
||
{post.image && (
|
||
<div className="w-full md:w-1/3 relative">
|
||
<div className="w-full aspect-[4/3] sm:w-[260px] sm:h-[157px] md:max-w-[320px] md:h-[220px] lg:max-w-[360px] lg:h-[257px] relative ml-auto">
|
||
<Image
|
||
src={post.image}
|
||
alt={post.title}
|
||
fill
|
||
className="object-cover rounded"
|
||
/>
|
||
<span className="absolute top-2 left-2 bg-red-700 text-white text-[10px] sm:text-[11px] px-2 py-[2px] uppercase font-bold">
|
||
{post.category}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="mt-8 flex flex-wrap gap-2 justify-start">
|
||
<button className="border px-3 py-1 text-xs hover:bg-gray-100 rounded-sm">
|
||
‹ PREV
|
||
</button>
|
||
<button className="border px-3 py-1 text-xs hover:bg-gray-100 rounded-sm">
|
||
NEXT ›
|
||
</button>
|
||
</div>
|
||
|
||
<div className="relative my-6 h-[120px] sm:h-[160px] md:h-[188px] overflow-hidden flex items-center mx-auto border">
|
||
<Image
|
||
src="/image-kolom.png"
|
||
alt="Berita Utama"
|
||
fill
|
||
className="object-contain"
|
||
/>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|