jengacore components · @jengacore/status-badge

StatusBadge

Icon + word from the shared status dictionary. Never colour alone.

TransferReceivedReservedCommittedAborted

SettlementOpenAwaiting RTGSSettledFailed

AlertIn reviewSLA < 1 hBreachedCleared

DisputeUnder investigationEvidence dueEscalatedResolved

LoanScheduledDue todayIn arrearsPaid

Install

terminal

npx shadcn@latest add @jengacore/status-badge

Without the namespace configured: npx shadcn@latest add https://ui.jengacore.com/r/<new-york-v4|base-nova>/status-badge.json

Registry dependencies

@jengacore/badge @jengacore/status

npm packages

lucide-react

Source

components/jc/status-badge.tsx

import * as React from "react"
import { CircleCheck, CircleX, Clock, Info } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { getStatus, type StatusDomain, type Tone } from "@/lib/jengacore/status"

const TONE_ICON: Record<Tone, React.ComponentType<{ className?: string; "aria-hidden"?: boolean }> | null> = {
  success: CircleCheck,
  warning: Clock,
  danger: CircleX,
  info: Info,
  neutral: null,
}

/**
 * Status as icon + word from the shared dictionary in lib/status.ts, so the same word gets the same tone
 * in every product. Add new words to the dictionary, never inline.
 */
export function StatusBadge({ domain, status, className }: { domain: StatusDomain; status: string; className?: string }) {
  const s = getStatus(domain, status)
  const Icon = TONE_ICON[s.tone]
  return (
    <Badge tone={s.tone} className={className}>
      {Icon ? <Icon aria-hidden /> : null}
      {s.label}
    </Badge>
  )
}