g1t/apps/web/app/components/package-icon.tsx
| 1 | import { Boxes, Container, Feather, Gem, 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 | maven: "#e8762b", |
| 15 | nuget: "#3d8fd6", |
| 16 | rubygems: "#e9573f", |
| 17 | }; |
| 18 | |
| 19 | /** A small tile marking which registry a package is in. */ |
| 20 | export function PackageIcon({ ecosystem, size = 28, className }: { ecosystem: Ecosystem; size?: number; className?: string }) { |
| 21 | const tint = TINT[ecosystem]; |
| 22 | const glyph = Math.round(size * 0.55); |
| 23 | return ( |
| 24 | <span |
| 25 | aria-hidden |
| 26 | className={cn("inline-grid shrink-0 place-items-center rounded-md font-bold", className)} |
| 27 | style={{ width: size, height: size, color: tint, background: `color-mix(in oklab, ${tint} 16%, transparent)` }} |
| 28 | > |
| 29 | {ecosystem === "container" && <Container size={glyph} />} |
| 30 | {ecosystem === "composer" && <Layers size={glyph} />} |
| 31 | {ecosystem === "cargo" && <Package size={glyph} />} |
| 32 | {ecosystem === "maven" && <Feather size={glyph} />} |
| 33 | {ecosystem === "nuget" && <Boxes size={glyph} />} |
| 34 | {ecosystem === "rubygems" && <Gem size={glyph} />} |
| 35 | {ecosystem === "npm" && <span style={{ fontSize: glyph }}>n</span>} |
| 36 | {ecosystem === "go" && <span style={{ fontSize: Math.round(size * 0.38) }}>GO</span>} |
| 37 | </span> |
| 38 | ); |
| 39 | } |