76 lines
2.5 KiB
TypeScript
76 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { format } from "date-fns";
|
|
import { useJourneys } from "@/hooks/useJourneys";
|
|
import { useBikeRoute } from "@/hooks/useBikeRoute";
|
|
import { useGeocode } from "@/hooks/useGeocode";
|
|
import { useClock } from "@/hooks/useClock";
|
|
import { useWienerLinien } from "@/hooks/useWienerLinien";
|
|
import type { Event, Station } from "@/types";
|
|
import TrainSection from "./TrainSection";
|
|
import BikeSection from "./BikeSection";
|
|
import WienerLinienSection from "./WienerLinienSection";
|
|
import CountdownBadge from "@/app/ui/CountdownBadge";
|
|
|
|
interface EventCardProps {
|
|
event: Event;
|
|
originStation: Station | null;
|
|
}
|
|
|
|
export default function EventCard({ event, originStation }: EventCardProps) {
|
|
const {
|
|
journeys,
|
|
loading: journeysLoading,
|
|
error: journeysError,
|
|
} = useJourneys(originStation?.extId ?? null, null, event.eventTime, 0);
|
|
|
|
const destCoords = useGeocode(event.destination);
|
|
|
|
const {
|
|
bikeRoute,
|
|
loading: bikeLoading,
|
|
error: bikeError,
|
|
} = useBikeRoute(originStation?.lat, originStation?.lng, destCoords.coords?.lat, destCoords.coords?.lng);
|
|
|
|
const {
|
|
stops,
|
|
departures,
|
|
loading: wlLoading,
|
|
error: wlError,
|
|
} = useWienerLinien(destCoords.coords?.lat, destCoords.coords?.lng);
|
|
|
|
const { countdown, status } = useClock(event.eventTime);
|
|
|
|
return (
|
|
<div className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">{event.title}</h3>
|
|
<CountdownBadge countdown={countdown} status={status} />
|
|
</div>
|
|
|
|
<div className="mb-2 text-sm text-gray-600 dark:text-gray-300">
|
|
<span className="font-medium">Destination:</span> {event.destination}
|
|
</div>
|
|
<div className="mb-4 text-sm text-gray-600 dark:text-gray-300">
|
|
<span className="font-medium">Time:</span> {format(event.eventTime, "EEE dd MMM yyyy HH:mm")}
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<TrainSection
|
|
journeys={journeys}
|
|
eventTime={event.eventTime}
|
|
destName={event.destination}
|
|
loading={journeysLoading}
|
|
error={journeysError}
|
|
/>
|
|
|
|
<BikeSection bikeRoute={bikeRoute} bikeLoading={bikeLoading} bikeError={bikeError} />
|
|
|
|
{stops.length > 0 && (
|
|
<WienerLinienSection stops={stops} departures={departures} loading={wlLoading} error={wlError} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|