blob: 362798ec21c874c8f5fd85a1d9531b90544013ad (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
import { Clock } from "lucide-react";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import { fetchArrivals } from "../api/arrivals";
import { type Arrival } from "../api/schema";
import StopDataProvider, { type Stop } from "../data/StopDataProvider";
import RouteIcon from "./RouteIcon";
interface StopItemProps {
stop: Stop;
showArrivals?: boolean;
}
const StopItem: React.FC<StopItemProps> = ({ stop, showArrivals }) => {
const { t } = useTranslation();
const [arrivals, setArrivals] = useState<Arrival[] | null>(null);
useEffect(() => {
let mounted = true;
if (showArrivals) {
fetchArrivals(stop.stopId, true)
.then((res) => {
if (mounted) {
setArrivals(res.arrivals.slice(0, 3));
}
})
.catch(console.error);
}
return () => {
mounted = false;
};
}, [showArrivals, stop.stopId]);
return (
<li>
<Link
to={`/stops/${stop.stopId}`}
className="flex items-center gap-x-4 gap-y-3 rounded-xl p-3 transition-all bg-slate-50 dark:bg-slate-800 border border-gray-200 dark:border-gray-700 shadow-sm hover:border-blue-400 dark:hover:border-blue-500 active:scale-[0.98] cursor-pointer"
>
<div className="flex-1 min-w-0 flex flex-col gap-1">
<div className="flex justify-between items-start gap-2">
<span className="text-base font-bold overflow-hidden text-ellipsis line-clamp-2 leading-tight text-slate-900 dark:text-slate-100">
{stop.favourite && (
<span className="text-yellow-500 mr-2">★</span>
)}
{StopDataProvider.getDisplayName(stop)}
</span>
</div>
<div className="text-xs flex items-center gap-1.5 text-slate-500 dark:text-slate-400 font-mono uppercase">
<span className="px-1.5 py-0.5 rounded flex items-center justify-center bg-slate-200 dark:bg-slate-700 text-[10px] font-bold text-slate-700 dark:text-slate-300 leading-none">
{stop.stopId.split(":")[0]}
</span>
<span>
{stop.stopCode || stop.stopId.split(":")[1] || stop.stopId}
</span>
</div>
{stop.lines && stop.lines.length > 0 && (
<div className="flex flex-wrap gap-1 mt-1">
{stop.lines.map((lineObj) => (
<RouteIcon
key={lineObj.line}
line={lineObj.line}
colour={lineObj.colour}
textColour={lineObj.textColour}
/>
))}
</div>
)}
{showArrivals && arrivals && arrivals.length > 0 && (
<div className="flex flex-col gap-1 mt-2 p-2 bg-slate-100 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
<div className="flex items-center gap-1.5 mb-1 opacity-70">
<Clock className="w-3 h-3" />
<span className="text-[10px] font-bold uppercase tracking-wider">
{t("estimates.next_arrivals", "Próximas llegadas")}
</span>
</div>
{arrivals.map((arr, i) => (
<div key={i} className="flex items-center gap-2 text-sm">
<div className="shrink-0">
<RouteIcon
line={arr.route.shortName}
colour={arr.route.colour}
textColour={arr.route.textColour}
/>
</div>
<span className="flex-1 truncate text-xs font-medium text-slate-700 dark:text-slate-300">
{arr.headsign.destination}
</span>
<span
className={`text-xs pr-1 font-bold ${
arr.estimate.precision === "confident"
? "text-green-600 dark:text-green-500"
: arr.estimate.precision === "unsure"
? "text-orange-600 dark:text-orange-500"
: arr.estimate.precision === "past"
? "text-gray-500 line-through"
: "text-blue-600 dark:text-blue-400"
}`}
>
{arr.estimate.minutes}'
</span>
</div>
))}
</div>
)}
</div>
</Link>
</li>
);
};
export default StopItem;
|
