From 12ecc97b07093f3cac6567c70ff75d57b429c674 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Tue, 21 Oct 2025 17:38:01 +0200
Subject: Implement new Santiago region (WIP)

---
 src/frontend/app/components/LineIcon.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

(limited to 'src/frontend/app/components/LineIcon.tsx')

diff --git a/src/frontend/app/components/LineIcon.tsx b/src/frontend/app/components/LineIcon.tsx
index 3d613e6..4f4bfd9 100644
--- a/src/frontend/app/components/LineIcon.tsx
+++ b/src/frontend/app/components/LineIcon.tsx
@@ -1,14 +1,23 @@
-import React from "react";
+import React, { useMemo } from "react";
 import "./LineIcon.css";
+import { type RegionId } from "../data/RegionConfig";
 
 interface LineIconProps {
   line: string;
+  region?: RegionId;
 }
 
-const LineIcon: React.FC<LineIconProps> = ({ line }) => {
-  const formattedLine = /^[a-zA-Z]/.test(line) ? line : `L${line}`;
+const LineIcon: React.FC<LineIconProps> = ({ line, region = "vigo" }) => {
+  const formattedLine = useMemo(() => {
+    return /^[a-zA-Z]/.test(line) ? line : `L${line}`;
+  }, [line]);
+  const cssVarName = `--line-${region}-${formattedLine.toLowerCase()}`;
+
   return (
-    <span className={`line-icon line-${formattedLine.toLowerCase()}`}>
+    <span
+      className="line-icon"
+      style={{ borderColor: `var(${cssVarName})` }}
+    >
       {formattedLine}
     </span>
   );
-- 
cgit v1.3