Rename LineIcon -> RouteIcon, fix some size issues

1 files changed, 48 insertions, 0 deletions

diff --git a/src/frontend/app/components/RouteIcon.tsx b/src/frontend/app/components/RouteIcon.tsx
new file mode 100644
index 0000000..7d984b9
--- /dev/null
+++ b/src/frontend/app/components/RouteIcon.tsx
@@ -0,0 +1,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;