Full real-time page, coruña real time

1 files changed, 21 insertions, 8 deletions

diff --git a/src/frontend/app/components/arrivals/ArrivalList.tsx b/src/frontend/app/components/arrivals/ArrivalList.tsx
index b2394fb..0186682 100644
--- a/src/frontend/app/components/arrivals/ArrivalList.tsx
+++ b/src/frontend/app/components/arrivals/ArrivalList.tsx
@@ -1,25 +1,38 @@
 import React from "react";
 import { type Arrival } from "../../api/schema";
-import { ReducedArrivalCard } from "./ArrivalCard";
+import { ArrivalCard } from "./ArrivalCard";
+import { ReducedArrivalCard } from "./ReducedArrivalCard";
 
 interface ArrivalListProps {
   arrivals: Arrival[];
   reduced?: boolean;
+  onArrivalClick?: (arrival: Arrival) => void;
 }
 
 export const ArrivalList: React.FC<ArrivalListProps> = ({
   arrivals,
   reduced,
+  onArrivalClick,
 }) => {
+  const clickable = Boolean(onArrivalClick);
+
   return (
     <div className="flex flex-col gap-3">
-      {arrivals.map((arrival, index) => (
-        <ReducedArrivalCard
-          key={`${arrival.route.shortName}-${index}`}
-          arrival={arrival}
-          reduced={reduced}
-        />
-      ))}
+      {arrivals.map((arrival, index) =>
+        reduced ? (
+          <ReducedArrivalCard
+            key={`${arrival.tripId}-${index}`}
+            arrival={arrival}
+            onClick={clickable ? () => onArrivalClick?.(arrival) : undefined}
+          />
+        ) : (
+          <ArrivalCard
+            key={`${arrival.tripId}-${index}`}
+            arrival={arrival}
+            onClick={clickable ? () => onArrivalClick?.(arrival) : undefined}
+          />
+        )
+      )}
     </div>
   );
 };