54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { Card, CardContent } from "@/components/ui/card";
|
||
|
|
|
||
|
|
const categories = [
|
||
|
|
{ name: "Investment", total: 45 },
|
||
|
|
{ name: "Technology", total: 32 },
|
||
|
|
{ name: "Partnership", total: 28 },
|
||
|
|
{ name: "Report", total: 23 },
|
||
|
|
{ name: "Event", total: 19 },
|
||
|
|
{ name: "CSR", total: 15 },
|
||
|
|
];
|
||
|
|
|
||
|
|
export default function ContentCategory() {
|
||
|
|
return (
|
||
|
|
<section className="py-20 ">
|
||
|
|
<div className="container mx-auto px-6">
|
||
|
|
{/* ===== Title ===== */}
|
||
|
|
<h2 className="text-3xl font-bold text-center mb-12">
|
||
|
|
Kategori Konten
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
{/* ===== Card ===== */}
|
||
|
|
<Card className="rounded-2xl shadow-xl border-1 ">
|
||
|
|
<CardContent className="p-10 space-y-8">
|
||
|
|
{categories.map((item, index) => (
|
||
|
|
<div key={index} className="flex items-center justify-between">
|
||
|
|
{/* Left */}
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
{/* Bullet */}
|
||
|
|
<div
|
||
|
|
className={`w-3 h-3 rounded-full ${
|
||
|
|
index % 2 === 0
|
||
|
|
? "bg-[#0f3b63]" // biru tua
|
||
|
|
: "bg-[#b07c18]" // gold
|
||
|
|
}`}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<span className="text-lg text-[#0f3b63] font-medium">
|
||
|
|
{item.name}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Right total */}
|
||
|
|
<span className="text-gray-500 text-lg">{item.total}</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|