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
|
import { useQuery } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import { fetchRoutes } from "~/api/transit";
import LineIcon from "~/components/LineIcon";
import { usePageTitle } from "~/contexts/PageTitleContext";
import "../tailwind-full.css";
export default function RoutesPage() {
const { t } = useTranslation();
usePageTitle(t("navbar.routes", "Rutas"));
const { data: routes, isLoading } = useQuery({
queryKey: ["routes"],
queryFn: () => fetchRoutes(["santiago", "vitrasa", "coruna", "feve"]),
});
const routesByAgency = routes?.reduce(
(acc, route) => {
const agency = route.agencyName || t("routes.unknown_agency", "Otros");
if (!acc[agency]) acc[agency] = [];
acc[agency].push(route);
return acc;
},
{} as Record<string, typeof routes>
);
return (
<div className="container mx-auto px-4 py-6">
<p className="mb-6 text-gray-700 dark:text-gray-300">
{t(
"routes.description",
"A continuación se muestra una lista de las rutas de autobús urbano con sus respectivos trayectos."
)}
</p>
{isLoading && (
<div className="flex justify-center py-12">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
</div>
)}
<div className="space-y-8">
{routesByAgency &&
Object.entries(routesByAgency).map(([agency, agencyRoutes]) => (
<div key={agency}>
<h2 className="text-xl font-bold text-text mb-4 border-b border-border pb-2">
{agency}
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{agencyRoutes.map((route) => (
<Link
key={route.id}
to={`/routes/${route.id}`}
className="flex items-center gap-3 p-4 bg-surface rounded-lg shadow hover:shadow-lg transition-shadow border border-border"
>
<LineIcon
line={route.shortName ?? "?"}
mode="pill"
colour={route.color ?? undefined}
textColour={route.textColor ?? undefined}
/>
<div className="flex-1 min-w-0">
<p className="text-sm md:text-md font-semibold text-text">
{route.longName}
</p>
</div>
</Link>
))}
</div>
</div>
))}
</div>
</div>
);
}
|
