From e7283ba10d45b42e1274cd13c3d6aabec57c85b4 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Sun, 30 Nov 2025 17:58:55 +0100
Subject: feat: add Tailwind CSS support and create ConsolidatedCirculationCard
 styles

- Added Tailwind CSS and its Vite plugin to the project dependencies.
- Updated Vite configuration to include Tailwind CSS plugin.
- Created a new CSS file for the Consolidated Circulation Card component with styles for various states and responsive design.
---
 src/frontend/app/components/LineIcon.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 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 8c3dbeb..5ccf80a 100644
--- a/src/frontend/app/components/LineIcon.tsx
+++ b/src/frontend/app/components/LineIcon.tsx
@@ -4,24 +4,28 @@ import "./LineIcon.css";
 
 interface LineIconProps {
   line: string;
+
+  /**
+   * @deprecated Unused since region is only Vigo
+   */
   region?: RegionId;
-  rounded?: boolean;
+
+  mode?: "rounded"|"pill"|"default";
 }
 
 const LineIcon: React.FC<LineIconProps> = ({
   line,
-  region = "vigo",
-  rounded = false,
+  mode = "default",
 }) => {
   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`;
+  const cssVarName = `--line-${formattedLine.toLowerCase()}`;
+  const cssTextVarName = `--line-${formattedLine.toLowerCase()}-text`;
 
   return (
     <span
-      className={rounded ? "line-icon-rounded" : "line-icon"}
+      className={`line-icon-${mode}`}
       style={
         {
           "--line-colour": `var(${cssVarName})`,
-- 
cgit v1.3