SPB Git forge
3commits 1branches 0releases
417.0 KBsize
maindefault branch
10 days agolast push
TypeScript 66.5% Python 30.9% JavaScript 1.4% CSS 0.7%
2.2 KB · 41 lines tsx
Raw Blame History
1import { cn } from '@/lib/cn';2import { MISSION_LABELS, OBJECT_TYPE_LABELS, ORBIT_CLASS_COLORS, STATUS_COLORS } from '@/lib/site';34export function StatusBadge({ status, className, size = 'sm' }: { status: string | null | undefined; className?: string; size?: 'sm' | 'md' }) {5  const s = status ?? 'UNKNOWN';6  const color = STATUS_COLORS[s] ?? 'var(--inactive)';7  return (8    <span className={cn('inline-flex items-center gap-1.5 rounded-full border font-medium', size === 'sm' ? 'px-2 py-0.5 text-[11px]' : 'px-2.5 py-1 text-xs', className)} style={{ color, borderColor: `color-mix(in oklab, ${color} 35%, transparent)`, background: `color-mix(in oklab, ${color} 10%, transparent)` }}>9      <span className={cn('dot', s === 'ACTIVE' && 'pulse')} aria-hidden />10      {s.charAt(0) + s.slice(1).toLowerCase()}11    </span>12  );13}1415export function OrbitBadge({ orbitClass, className }: { orbitClass: string | null | undefined; className?: string }) {16  const c = orbitClass ?? 'UNKNOWN';17  const color = ORBIT_CLASS_COLORS[c] ?? 'var(--other)';18  return (19    <span className={cn('mono inline-flex items-center rounded px-1.5 py-0.5 text-[11px] font-medium', className)} style={{ color, background: `color-mix(in oklab, ${color} 12%, transparent)` }}>20      {c === 'UNKNOWN' ? '—' : c}21    </span>22  );23}2425export function TypeBadge({ type, className }: { type: string | null | undefined; className?: string }) {26  return <span className={cn('inline-flex items-center rounded border border-rule px-1.5 py-0.5 text-[11px] text-ink-2', className)}>{OBJECT_TYPE_LABELS[type ?? ''] ?? type ?? '—'}</span>;27}2829export function MissionLabel({ mission }: { mission: string | null | undefined }) {30  return <>{MISSION_LABELS[mission ?? 'unknown'] ?? mission ?? 'Unknown'}</>;31}3233export function FreshnessBadge({ status, label }: { status: 'fresh' | 'aging' | 'stale' | 'unavailable' | 'not_enabled' | string; label?: string }) {34  const color = status === 'fresh' ? 'var(--active)' : status === 'aging' ? 'var(--warn)' : status === 'stale' ? 'var(--danger)' : 'var(--inactive)';35  return (36    <span className="inline-flex items-center gap-1.5 text-xs" style={{ color }}>37      <span className="dot" aria-hidden /> {label ?? status.replace('_', ' ')}38    </span>39  );40}41