92 lines
3.3 KiB
TypeScript
92 lines
3.3 KiB
TypeScript
import React from "react";
|
|
|
|
const EventCalender = () => {
|
|
return (
|
|
<div className="mt-8 rounded-lg bg-white dark:bg-zinc-900 p-4 shadow">
|
|
<h2 className="text-lg font-bold text-red-600 border-b border-red-600 mb-4 pb-2">
|
|
KALENDER ACARA
|
|
</h2>
|
|
<div className="flex flex-col md:flex-row gap-4">
|
|
<div className="w-full md:w-1/2">
|
|
<div className="bg-gray-100 dark:bg-zinc-800 p-4 rounded-md ">
|
|
<div className="text-center font-semibold mb-2">Mei 2025</div>
|
|
<div className="grid grid-cols-7 gap-1 text-sm text-center">
|
|
{["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((d) => (
|
|
<div key={d} className="font-medium">
|
|
{d}
|
|
</div>
|
|
))}
|
|
{[...Array(35)].map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className={`p-1 rounded ${
|
|
[6, 7, 15].includes(i) ? "bg-red-600 text-white" : ""
|
|
}`}
|
|
>
|
|
{i >= 2 && i - 1}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="space-y-4 mt-3">
|
|
<div className="flex items-center bg-gray-200 rounded-xl shadow-sm p-2">
|
|
<img
|
|
src="/images/all-img/calendar1.png"
|
|
alt="HUT Polwan"
|
|
className="w-24 h-20 object-cover rounded"
|
|
/>
|
|
<div className="flex justify-between items-center w-full ml-3">
|
|
<div className="text-sm font-semibold line-clamp-2">
|
|
HUT Polwan ke-76, Kapolri...
|
|
</div>
|
|
<div className="text-sm font-semibold whitespace-nowrap ml-3">
|
|
16 Mei - 16 Mei
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center bg-gray-200 rounded-xl shadow-sm p-2">
|
|
<img
|
|
src="/images/all-img/calendar2.png"
|
|
alt="Olahraga"
|
|
className="w-24 h-20 object-cover rounded"
|
|
/>
|
|
<div className="flex justify-between items-center w-full ml-3">
|
|
<div className="text-sm font-semibold line-clamp-2 uppercase">
|
|
Olahraga Bersama Pad...
|
|
</div>
|
|
<div className="text-sm font-semibold whitespace-nowrap ml-3">
|
|
22 Mei - 22 Mei
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Detail Acara */}
|
|
<div className="w-full md:w-1/2 space-y-4">
|
|
<div className="bg-gray-100 dark:bg-zinc-800 rounded-md p-2 mt-4">
|
|
<img
|
|
src="/images/all-img/calendar1.png"
|
|
alt="Detail Event"
|
|
className="rounded mb-2"
|
|
/>
|
|
<p className="text-sm font-semibold mb-1">
|
|
HUT Polwan ke-76, Kapolri Apresiasi Prestasi yang Diberikan
|
|
</p>
|
|
<p className="text-xs text-gray-500 mb-1">
|
|
Kapolri Jenderal Pol. Listyo Sigit Prabowo memberikan apresiasi
|
|
kepada polisi wanita yang berprestasi...
|
|
</p>
|
|
<a href="#" className="text-xs text-blue-500">
|
|
Lihat Selengkapnya
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EventCalender;
|