Transport badge

1import React from "react";
2import { cn } from "@/lib/utils";
3 
4const SYSTEMS = {
5  SG: {
6    NS: {
7      name: "North South Line",
8      short: "NS",
9      long: "NSL",
10      bg: "#e22726",
11      fg: "#FFF"
12    },
13    EW: {
14      name: "East West Line",
15      short: "EW",
16      long: "EWL",
17      bg: "#00964e",
18      fg: "#FFF"
19    },
20    NE: {
21      name: "North East Line",
22      short: "NE",
23      long: "NEL",
24      bg: "#8f4299",
25      fg: "#FFF"
26    },
27    CE: {
28      name: "Circle Line",
29      short: "CE",
30      long: "CCL",
31      bg: "#f99d26",
32      fg: "#000"
33    },
34    DT: {
35      name: "Downtown Line",
36      short: "DT",
37      long: "DTL",
38      bg: "#005ea8",
39      fg: "#fff"
40    },
41    TE: {
42      name: "Thomson-East Coast Line",
43      short: "TE",
44      long: "TEL",
45      bg: "#9d5b26",
46      fg: "#FFF"
47    }
48  },
49  // Add more systems here in the future
50  HK: {
51    // Hong Kong MTR
52    KT: {
53      name: "Kwun Tong Line",
54      short: "KT",
55      long: "KTL",
56      bg: "#399e48",
57      fg: "#FFF"
58    },
59    AE: {
60      name: "Airport Express Line",
61      short: "AE",
62      long: "AEL",
63      bg: "#39858d",
64      fg: "#FFF"
65    },
66    TO: {
67      name: "Tseung Kwan O Line",
68      short: "TO",
69      long: "TKOL",
70      bg: "#7a3d90",
71      fg: "#000"
72    },
73    SI: {
74      name: "South Island Line",
75      short: "SI",
76      long: "SIL",
77      bg: "#c7d536",
78      fg: "#FFF"
79    },
80    TW: {
81      name: "Tsuen Wan Line",
82      short: "TW",
83      long: "TWL",
84      bg: "#d5371f",
85      fg: "#FFF"
86    },
87    IS: {
88      name: "Island Line",
89      short: "IS",
90      long: "ISL",
91      bg: "#3d6fbe",
92      fg: "#FFF"
93    },
94    TC: {
95      name: "Tung Chung Line",
96      short: "TC",
97      long: "TCL",
98      bg: "#e6a03e",
99      fg: "#000"
100    },
101    DR: {
102      name: "Disneyland Resort Line",
103      short: "DR",
104      long: "DRL",
105      bg: "#df76a4",
106      fg: "#000"
107    },
108    ER: {
109      name: "East Rail Line",
110      short: "ER",
111      long: "ERL",
112      bg: "#78b2e5",
113      fg: "#000"
114    },
115    TM: {
116      name: "Tuen Ma Line",
117      short: "TM",
118      long: "TML",
119      bg: "#913a0e",
120      fg: "#FFF"
121    }
122  }
123} as const;
124 
125type SystemKey = keyof typeof SYSTEMS;
126type BadgeSize = "xs" | "sm" | "md" | "lg";
127const sizeClasses: Record<BadgeSize, string> = {
128  xs: "px-1 py-0.5 text-[10px]",
129  sm: "px-1.5 py-0.5 text-xs",
130  md: "px-2 py-0.5 text-sm",
131  lg: "px-3 py-1 text-base"
132};
133 
134interface TransportBadgeProps {
135  stationCode: string | string[];
136// … truncated