From 769d12a525875d3577b2868208d6315c56ce77d6 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Mon, 3 Nov 2025 11:20:27 +0100
Subject: Display available lines on StopSheet

---
 src/frontend/app/components/LineIcon.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 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 4f4bfd9..55e38c2 100644
--- a/src/frontend/app/components/LineIcon.tsx
+++ b/src/frontend/app/components/LineIcon.tsx
@@ -5,18 +5,20 @@ import { type RegionId } from "../data/RegionConfig";
 interface LineIconProps {
   line: string;
   region?: RegionId;
+  rounded?: boolean;
 }
 
-const LineIcon: React.FC<LineIconProps> = ({ line, region = "vigo" }) => {
+const LineIcon: React.FC<LineIconProps> = ({ line, region = "vigo", rounded = false }) => {
   const formattedLine = useMemo(() => {
     return /^[a-zA-Z]/.test(line) ? line : `L${line}`;
   }, [line]);
   const cssVarName = `--line-${region}-${formattedLine.toLowerCase()}`;
+  const cssTextVarName = `--line-${region}-${formattedLine.toLowerCase()}-text`;
 
   return (
     <span
-      className="line-icon"
-      style={{ borderColor: `var(${cssVarName})` }}
+      className={rounded ? 'line-icon-rounded' : 'line-icon'}
+      style={{ '--line-colour': `var(${cssVarName})`, '--line-text-colour': `var(${cssTextVarName}, unset)` } as React.CSSProperties}
     >
       {formattedLine}
     </span>
-- 
cgit v1.3