g1t/apps/web/app/components/package-icon.tsx
| 1 | import { Container, Layers, Package } from "lucide-react"; |
| 2 | |
| 3 | import type { Ecosystem } from "@g1t/contracts"; |
| 4 | |
| 5 | import { cn } from "../lib/cn"; |
| 6 | |
| 7 | /** Each registry's colour, as its own tools use it, so a list reads at a glance. */ |
| 8 | const TINT: Record<Ecosystem, string> = { |
| 9 | container: "#2496ed", |
| 10 | npm: "#cb3837", |
| 11 | composer: "#c08a5b", |
| 12 | go: "#00add8", |
| 13 | cargo: "#dea584", |
| 14 | }; |
| 15 | |
| 16 | /** A small tile marking which registry a package is in. */ |
| 17 | export function PackageIcon({ ecosystem, size = 28, className }: { ecosystem: Ecosystem; size?: number; className?: string }) { |
| 18 | const tint = TINT[ecosystem]; |
| 19 | const glyph = Math.round(size * 0.55); |
| 20 | return ( |
| 21 | <span |
| 22 | aria-hidden |
| 23 | className={cn("inline-grid shrink-0 place-items-center rounded-md font-bold", className)} |
| 24 | style={{ width: size, height: size, color: tint, background: `color-mix(in oklab, ${tint} 16%, transparent)` }} |
| 25 | > |
| 26 | {ecosystem === "container" && <Container size={glyph} />} |
| 27 | {ecosystem === "composer" && <Layers size={glyph} />} |
| 28 | {ecosystem === "cargo" && <Package size={glyph} />} |
| 29 | {ecosystem === "npm" && <span style={{ fontSize: glyph }}>n</span>} |
| 30 | {ecosystem === "go" && <span style={{ fontSize: Math.round(size * 0.38) }}>GO</span>} |
| 31 | </span> |
| 32 | ); |
| 33 | } |