web-humas-ri/components/landing-page/news.tsx

"use client";
import { Clock } from "lucide-react";
import Image from "next/image";

const posts = [
  {
    id: 1,
    image: "/jokowi.jpg",
    category: "ISTANA",
    title: "Presiden Jokowi Pimpin Pertemuan KTT AIS Perdana di Bali",
    excerpt:
      "HumasRI – Konferensi Tingkat Tinggi (KTT) Archipelagic and Island States (AIS) Forum mulai telah mulai dilaksanakan di Bali. Dalam pertemuan yang digelar...",
    author: "ADMIN HUMASRI",
    date: "12 OKTOBER 2023",
  },
  {
    id: 2,
    image: "/dpr.jpg",
    category: "DPR.GO.ID",
    title: "DPR Sahkan RUU ASN Jadi Undang-Undang",
    excerpt:
      "HumasRI – DPR RI resmi mengesahkan Undang-Undang tentang Perubahan atas Undang-undang Nomor 5 tahun 2014 tentang Aparatur Sipil Negara (ASN) pada...",
    author: "ADMIN HUMASRI",
    date: "9 OKTOBER 2023",
  },
  {
    id: 3,
    image: "/revisi.jpg",
    category: "DPR.GO.ID",
    title: "Revisi UU IKN Resmi Disahkan di Rapat Paripurna DPR",
    excerpt:
      "HumasRI – DPR RI resmi mengesahkan RUU tentang perubahan atas Undang-Undang Nomor 3 Tahun 2022 tentang Ibu Kota Negara (IKN) menjadi Undang-Undang...",
    author: "ADMIN HUMASRI",
    date: "4 OKTOBER 2023",
  },
  {
    id: 4,
    image: "/komitmen.jpg",
    category: "ISTANA",
    title:
      "Presiden Jokowi Tegaskan KCJB Komitmen Pemerintah Layani Masyarakat",
    excerpt:
      "HumasRI – Presiden Joko Widodo kembali menggunakan moda transportasi Kereta Cepat Jakarta-Bandung (KCJB) WHOOSH dari Stasiun KCJB Halim, Jakarta, menuju Stasiun...",
    author: "ADMIN HUMASRI",
    date: "12 OKTOBER 2023",
  },
  {
    id: 5,
    image: "/regulasi.jpg",
    category: "DPR.GO.ID",
    title:
      "Presiden Tekankan Pentingnya Regulasi Transformasi Digital yang Lebih Holistis",
    excerpt:
      "HumasRI - Presiden Joko Widodo menekankan pentingnya regulasi terkait transformasi digital. Menurut Presiden, regulasi tersebut harus dibuat dengan lebih holistis...",
    author: "ADMIN HUMASRI",
    date: "9 OKTOBER 2023",
  },
  {
    id: 6,
    image: "/kunjungan.jpg",
    category: "DPR.GO.ID",
    title: "Presiden Jokowi Lanjutkan Kunjungan Hari Ketiga di IKN",
    excerpt:
      "HumasRI - Presiden Joko Widodo melanjutkan kunjungan hari ketiga di Ibu Kota Nusantara (IKN), Kabupaten Penajam Paser Utara, Provinsi Kalimantan...",
    author: "ADMIN HUMASRI",
    date: "4 OKTOBER 2023",
  },
];

export default function Beranda() {
  return (
    <section className="max-w-7xl mx-auto px-4 py-5 ">
      <div className="flex flex-col md:flex-row md:items-center md:justify-between  mb-2 pb-1 gap-2 bg-white border-t-4 border-red-600 pt-2 px-4">
        <h2 className="text-lg md:text-lg font-bold ">BERITA TERBARU</h2>
        <div className="flex flex-wrap gap-2 text-xs text-gray-600">
          <button className="hover:text-red-600">ALL</button>
          <button className="hover:text-red-600">PRESIDENRI.GO.ID</button>
          <button className="hover:text-red-600">DPR.GO.ID</button>
          <button className="hover:text-red-600">SETNEG.GO.ID</button>
          <button className="hover:text-red-600">KSP.GO.ID</button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10 bg-white border pt-4 px-4">
        {posts.map((post) => (
          <div key={post.id} className="bg-white rounded overflow-hidden">
            <div className="relative">
              <Image
                src={post.image}
                alt={post.title}
                width={500}
                height={300}
                className="w-full h-52 md:h-56 object-cover"
              />
              <span className="absolute bottom-1 left-1 bg-red-700 text-white text-[11px] px-2 py-1 uppercase">
                {post.category}
              </span>
            </div>
            <div className="p-3 md:p-4">
              <h3 className="font-bold text-sm md:text-base leading-snug mb-2">
                {post.title}
              </h3>
              <p className="text-sm text-gray-700 line-clamp-3 mb-3">
                {post.excerpt}
              </p>
              <div className="text-xs text-gray-500 flex items-center gap-2">
                BY{" "}
                <span className="text-blue-800 font-semibold">
                  {post.author}
                </span>{" "}
                <Clock className="w-3 h-3 text-blue-500" />
                <span className="text-gray-600  ">{post.date}</span>
              </div>
            </div>
          </div>
        ))}
        <div className=" flex flex-wrap gap-2 justify-center md:justify-start mb-3">
          <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>
    </section>
  );
}