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
|
import React, { useMemo } from "react";
import { formatHex } from "~/utils/colours";
import "./RouteIcon.css";
interface RouteIconProps {
line: string;
mode?: "rounded" | "pill" | "default";
colour: string;
textColour: string;
}
const RouteIcon: React.FC<RouteIconProps> = ({
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(() => {
return formatHex(colour, true);
}, [colour]);
const actualTextColour = useMemo(() => {
return formatHex(textColour, true);
}, [textColour]);
return (
<span
className={`line-icon-${mode}`}
style={
{
"--line-colour": actualLineColour,
"--line-text-colour": actualTextColour,
} as React.CSSProperties
}
>
{actualLine}
</span>
);
};
export default RouteIcon;
|
