| | | 1 | | import { useTheme } from "~/lib/theme"; |
| | | 2 | | import { CATEGORY_COLORS } from "~/lib/colors"; |
| | | 3 | | |
| | 1 | 4 | | export function CategoryTag({ name }: { name: string }) { |
| | 1 | 5 | | const theme = useTheme(); |
| | 1 | 6 | | if (theme === "tui") { |
| | 0 | 7 | | return ( |
| | | 8 | | <span style={{ |
| | | 9 | | fontSize: 11, padding: "1px 6px", |
| | | 10 | | border: "1px solid #ffd24d", color: "#ffd24d", |
| | | 11 | | fontFamily: "inherit", whiteSpace: "nowrap", |
| | | 12 | | }}>[{name}]</span> |
| | | 13 | | ); |
| | | 14 | | } |
| | 1 | 15 | | if (theme === "win98") { |
| | 0 | 16 | | return <span style={{ fontSize: 11, color: "var(--c-fg)" }}>{name}</span>; |
| | | 17 | | } |
| | 1 | 18 | | if (theme === "cde") { |
| | 0 | 19 | | return <span style={{ fontSize: 11, color: "#3d6062", fontWeight: 700 }}>{name}</span>; |
| | | 20 | | } |
| | 1 | 21 | | const c = CATEGORY_COLORS[name] ?? { bg: "rgba(120,120,140,0.10)", fg: "var(--c-fg-2)" }; |
| | 1 | 22 | | return ( |
| | | 23 | | <span style={{ |
| | | 24 | | fontSize: 11, padding: "2px 8px", borderRadius: 4, |
| | | 25 | | background: c.bg, color: c.fg, fontWeight: 500, whiteSpace: "nowrap", |
| | | 26 | | }}> |
| | | 27 | | {name} |
| | | 28 | | </span> |
| | | 29 | | ); |
| | | 30 | | } |