src/frontend/app/components/LineIcon.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import React, { useMemo } from "react";
import "./LineIcon.css";
import { type RegionId } from "../data/RegionConfig";

interface LineIconProps {
  line: string;
  region?: RegionId;
  rounded?: boolean;
}

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={rounded ? "line-icon-rounded" : "line-icon"}
      style={
        {
          "--line-colour": `var(${cssVarName})`,
          "--line-text-colour": `var(${cssTextVarName}, unset)`,
        } as React.CSSProperties
      }
    >
      {line}
    </span>
  );
};

export default LineIcon;