| 1 | import type { EnvironmentMachineKind } from "@t3tools/contracts"; |
| 2 | import { SymbolView, type AppSymbolName } from "./AppSymbol"; |
| 3 | |
| 4 | export const ENVIRONMENT_MACHINE_SYMBOLS = { |
| 5 | server: "server.rack", |
| 6 | cloud: "cloud", |
| 7 | linux: "terminal", |
| 8 | desktop: "desktopcomputer", |
| 9 | laptop: "laptopcomputer", |
| 10 | "mac-mini": "macmini", |
| 11 | "mac-studio": "macstudio", |
| 12 | } as const satisfies Record<EnvironmentMachineKind, AppSymbolName>; |
| 13 | |
| 14 | export const ENVIRONMENT_MACHINE_KIND_LABELS: Record<EnvironmentMachineKind, string> = { |
| 15 | server: "Server", |
| 16 | cloud: "Cloud VM", |
| 17 | linux: "Linux/WSL", |
| 18 | desktop: "Desktop", |
| 19 | laptop: "Laptop", |
| 20 | "mac-mini": "Mini PC", |
| 21 | "mac-studio": "Workstation", |
| 22 | }; |
| 23 | |
| 24 | /** The glyph an environment wears in lists; SF Symbols on iOS, Tabler on Android. */ |
| 25 | export function EnvironmentMachineSymbol(props: { |
| 26 | readonly kind: EnvironmentMachineKind; |
| 27 | readonly size: number; |
| 28 | readonly tintColorClassName: string; |
| 29 | }) { |
| 30 | return ( |
| 31 | <SymbolView |
| 32 | accessibilityLabel={ENVIRONMENT_MACHINE_KIND_LABELS[props.kind]} |
| 33 | name={ENVIRONMENT_MACHINE_SYMBOLS[props.kind]} |
| 34 | size={props.size} |
| 35 | tintColorClassName={props.tintColorClassName} |
| 36 | type="monochrome" |
| 37 | /> |
| 38 | ); |
| 39 | } |