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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

import React, { useMemo } from "react";
import "./LineIcon.css";

interface LineIconProps {
  line: string;
  mode?: "rounded" | "pill" | "default";
  colour?: string;
  textColour?: string;
}

const LineIcon: React.FC<LineIconProps> = ({
  line,
  mode = "default",
  colour,
  textColour,
}) => {
  const actualLine = useMemo(() => {
    return line.trim().replace("510", "NAD");
  }, [line]);

  const formattedLine = useMemo(() => {
    return /^[a-zA-Z]/.test(actualLine) ? actualLine : `L${actualLine}`;
  }, [actualLine]);

  const actualLineColour = useMemo(() => {
    const actualColour = colour?.startsWith("#") ? colour : `#${colour}`;
    return colour ? actualColour : `var(--line-${formattedLine.toLowerCase()})`;
  }, [formattedLine]);
  const actualTextColour = useMemo(() => {
    const actualTextColour = textColour?.startsWith("#")
      ? textColour
      : `#${textColour}`;
    return textColour
      ? actualTextColour
      : `var(--line-${formattedLine.toLowerCase()}-text, #000000)`;
  }, [formattedLine]);

  return (
    <span
      className={`line-icon-${mode}`}
      style={
        {
          "--line-colour": actualLineColour,
          "--line-text-colour": actualTextColour,
        } as React.CSSProperties
      }
    >
      {actualLine}
    </span>
  );
};

export default LineIcon;