ScoreChip

npx shadcn@latest add @jengacore/score-chip

import * as React from "react"

import { cn } from "@/lib/utils"

/**
 * Mulisa risk score in a table cell: the number on a tinted ground, toned by band (high ≥ 70 red,
 * medium ≥ 40 amber, low grey). The band word is in the tooltip and for screen readers; RiskScore shows
 * the full scale and the rules that fired.
 */
export function ScoreChip({ score, bands = [40, 70], className }: { score: number; bands?: [number, number]; className?: string }) {
  const [mid, high] = bands
  const band = score >= high ? "high" : score >= mid ? "medium" : "low"
  return (
    <span
      data-slot="score-chip"
      title={`Risk score ${score}, ${band}`}
      className={cn(
        "inline-flex h-[22px] min-w-[30px] items-center justify-center rounded-sm px-1.5 font-mono text-xs font-medium tabular-nums",
        band === "high" && "bg-destructive-subtle text-destructive",
        band === "medium" && "bg-warning-subtle text-warning",
        band === "low" && "bg-muted text-foreground/80",
        className
      )}
    >
      {score}
      <span className="sr-only">, {band} risk</span>
    </span>
  )
}