Files
uldp.edu.vn/app/components/blog/UpcomingEvents.tsx

41 lines
1.3 KiB
TypeScript

const events = [
{
month: "Nov",
day: "12",
title: "Open Campus Day",
time: "09:00 AM - 04:00 PM",
},
{
month: "Nov",
day: "18",
title: "Guest Lecture: Future of AI in Arts",
time: "06:00 PM - Main Hall",
},
];
export default function UpcomingEvents() {
return (
<div className="bg-white rounded-xl border border-ui-border shadow-soft p-6">
<div className="blog-widget-title font-bold text-ui-text mb-6 pb-4 border-b border-ui-border">
Upcoming Events
</div>
<ul className="space-y-4">
{events.map((e) => (
<li key={e.title} className="flex gap-4">
<div className="flex flex-col items-center justify-center w-12 h-12 bg-brand-light rounded-lg border border-brand-blue/20 shrink-0">
<span className="text-xs font-bold text-brand-blue uppercase">{e.month}</span>
<span className="text-lg font-bold text-ui-text leading-none">{e.day}</span>
</div>
<div>
<div className="text-sm font-bold text-ui-text hover:text-brand-blue cursor-pointer transition-colors">{e.title}</div>
<p className="text-xs text-ui-muted mt-1">
<i className="far fa-clock mr-1"></i>{e.time}
</p>
</div>
</li>
))}
</ul>
</div>
);
}