46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { format } from "date-fns";
|
|
import { Event, Station } from "@timetoleave/core";
|
|
import EventCard from "@/app/event/EventCard";
|
|
|
|
type DayEventsProps = {
|
|
events: Event[];
|
|
date: Date;
|
|
originStation: Station | null;
|
|
className?: string;
|
|
};
|
|
|
|
const DayEvents: React.FC<DayEventsProps> = ({ events, date, originStation, className = "" }) => {
|
|
const filteredEvents = events.filter((event) => {
|
|
const eventDate = new Date(event.eventTime);
|
|
return (
|
|
eventDate.getDate() === date.getDate() &&
|
|
eventDate.getMonth() === date.getMonth() &&
|
|
eventDate.getFullYear() === date.getFullYear()
|
|
);
|
|
});
|
|
|
|
if (filteredEvents.length === 0) {
|
|
return (
|
|
<div className={`brand-panel rounded-2xl px-4 py-8 text-center text-[#F4F1EA]/60 ${className}`}>
|
|
<p>No events scheduled for {format(date, "MMMM d, yyyy")}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={`space-y-4 ${className}`}>
|
|
<h3 className="text-lg font-semibold text-white">Events for {format(date, "MMMM d, yyyy")}</h3>
|
|
<div className="space-y-3">
|
|
{filteredEvents.map((event) => (
|
|
<EventCard key={event.id} event={event} originStation={originStation} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DayEvents;
|