From 02525bcb98bc1841c5734623be4d7936e66f32b2 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Fri, 7 Nov 2025 10:28:24 +0100
Subject: Finish implementing navidad

---
 src/frontend/app/components/StopAlert.css | 13 +------------
 src/frontend/app/components/StopAlert.tsx | 20 +++++++++++++++-----
 src/frontend/app/data/StopDataProvider.ts |  5 +++--
 3 files changed, 19 insertions(+), 19 deletions(-)

(limited to 'src/frontend/app')

diff --git a/src/frontend/app/components/StopAlert.css b/src/frontend/app/components/StopAlert.css
index 2ba3baa..c1d9a0a 100644
--- a/src/frontend/app/components/StopAlert.css
+++ b/src/frontend/app/components/StopAlert.css
@@ -72,7 +72,7 @@
 }
 
 .stop-alert-compact .stop-alert-title {
-  font-size: 0.85rem;
+  font-size: 0.95rem;
 }
 
 .stop-alert-message {
@@ -81,17 +81,6 @@
 }
 
 .stop-alert-compact .stop-alert-message {
-  font-size: 0.8rem;
-}
-
-.stop-alert-alternate-codes {
   font-size: 0.85rem;
-  margin-top: 0.25rem;
-  font-style: italic;
-  opacity: 0.8;
-}
-
-.stop-alert-compact .stop-alert-alternate-codes {
-  font-size: 0.75rem;
 }
 
diff --git a/src/frontend/app/components/StopAlert.tsx b/src/frontend/app/components/StopAlert.tsx
index a96f93e..d969108 100644
--- a/src/frontend/app/components/StopAlert.tsx
+++ b/src/frontend/app/components/StopAlert.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { AlertCircle, Info } from "lucide-react";
+import React, { useMemo } from "react";
+import { AlertCircle, AlertOctagon, Info, TriangleAlert } from "lucide-react";
 import type { Stop } from "~/data/StopDataProvider";
 import "./StopAlert.css";
 
@@ -15,11 +15,21 @@ export const StopAlert: React.FC<StopAlertProps> = ({ stop, compact = false }) =
     return null;
   }
 
-  const isError = stop.cancelled === true;
+  const alertType = useMemo(() => {
+    if (stop.alert === "error") return "stop-alert-error";
+    if (stop.alert === "warning") return "stop-alert-warning";
+    return "stop-alert-info";
+  }, [stop.alert]);
+
+  const alertIcon = useMemo(() => {
+    if (stop.alert === "error") return <AlertOctagon />;
+    if (stop.alert === "warning") return <TriangleAlert />;
+    return <Info />;
+  }, [stop.alert]);
 
   return (
-    <div className={`stop-alert ${isError ? 'stop-alert-error' : 'stop-alert-info'} ${compact ? 'stop-alert-compact' : ''}`}>
-      {isError ? <AlertCircle /> : <Info />}
+    <div className={`stop-alert ${alertType} ${compact ? 'stop-alert-compact' : ''}`}>
+      {alertIcon}
       <div className="stop-alert-content">
         {stop.title && <div className="stop-alert-title">{stop.title}</div>}
         {stop.message && <div className="stop-alert-message">{stop.message}</div>}
diff --git a/src/frontend/app/data/StopDataProvider.ts b/src/frontend/app/data/StopDataProvider.ts
index 25a617b..799dcb5 100644
--- a/src/frontend/app/data/StopDataProvider.ts
+++ b/src/frontend/app/data/StopDataProvider.ts
@@ -18,10 +18,11 @@ export interface Stop {
   lines: string[];
   favourite?: boolean;
   amenities?: string[];
-  cancelled?: boolean;
+
   title?: string;
   message?: string;
-  alternateCodes?: string[];
+  alert?: "info"|"warning"|"error";
+  cancelled?: boolean;
 }
 
 // In-memory cache and lookup map per region
-- 
cgit v1.3