From 89d83f305db69f5bf86a4290341785b2673c35d0 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Mon, 1 Dec 2025 00:10:58 +0100
Subject: Add line list with link to official schedules

---
 src/frontend/app/routes/lines.tsx | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/frontend/app/routes/lines.tsx

(limited to 'src/frontend/app/routes/lines.tsx')

diff --git a/src/frontend/app/routes/lines.tsx b/src/frontend/app/routes/lines.tsx
new file mode 100644
index 0000000..658716f
--- /dev/null
+++ b/src/frontend/app/routes/lines.tsx
@@ -0,0 +1,37 @@
+import { useTranslation } from "react-i18next";
+import LineIcon from "~/components/LineIcon";
+import { usePageTitle } from "~/contexts/PageTitleContext";
+import { VIGO_LINES } from "~/data/LinesData";
+import '../tailwind-full.css';
+
+export default function LinesPage() {
+    const { t } = useTranslation();
+    usePageTitle(t("navbar.lines", "Líneas"));
+
+    return (
+        <div className="container mx-auto px-4 py-6">
+            <p className="mb-6 text-gray-700 dark:text-gray-300">
+                {t("lines.description", "A continuación se muestra una lista de las líneas de autobús urbano de Vigo con sus respectivas rutas y enlaces a los horarios oficiales.")}
+            </p>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {VIGO_LINES.map((line) => (
+                    <a
+                        key={line.lineNumber}
+                        href={line.scheduleUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow border border-gray-200 dark:border-gray-700"
+                    >
+                        <LineIcon line={line.lineNumber} mode="rounded" />
+                        <div className="flex-1 min-w-0">
+                            <p className="text-sm md:text-md font-semibold text-gray-900 dark:text-gray-100">
+                                {line.routeName}
+                            </p>
+                        </div>
+                    </a>
+                ))}
+            </div>
+        </div>
+    );
+}
-- 
cgit v1.3