diff options
Diffstat (limited to 'src/frontend/app/components/LineIcon.tsx')
| -rw-r--r-- | src/frontend/app/components/LineIcon.tsx | 8 |
1 files changed, 5 insertions, 3 deletions
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> |