kontenhumas-fe/components/landing-page/category.tsx

37 lines
949 B
TypeScript

"use client";
export default function Category() {
const categories = [
"PON XXI",
"OPERASI KETUPAT 2025",
"HUT HUMAS KE-74",
"OPERASI ZEBRA 2025",
"OPERASI MANTAP PRAJA & PILKADA 2024",
"PERS RILIS",
"LIPUTAN KEGIATAN",
"UNGKAP KASUS",
"INFOGRAFIS",
"SEPUTAR PRESTASI",
];
return (
<section className="px-4 py-10">
<div className="max-w-[1350px] mx-auto bg-white rounded-xl shadow-md p-6">
<h2 className="text-xl font-semibold mb-5">
10 Kategori Paling Populer
</h2>
<div className="flex flex-wrap gap-3">
{categories.map((category, index) => (
<button
key={index}
className="px-4 py-2 rounded border border-gray-300 text-gray-700 text-sm font-medium hover:bg-gray-100 transition"
>
{category}
</button>
))}
</div>
</div>
</section>
);
}