jengacore components · @jengacore/sla-chip

SlaChip

Countdown: green, amber under the threshold, red and ticking when breached.

01:5200:18−00:122d 22h

Install

terminal

npx shadcn@latest add @jengacore/sla-chip

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

Registry dependencies

@jengacore/theme

npm packages

lucide-react

Source

components/jc/sla-chip.tsx

import * as React from "react"
import { Clock } from "lucide-react"

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

/**
 * SLA countdown in minutes. Green above `warnBelow`, amber under it, red and ticking when breached
 * (a negative countdown). Mulisa alerts: warnBelow 60 (1 h). Disputes cases: warnBelow 1440 (24 h).
 */
export function SlaChip({ minutes, warnBelow = 60, className }: { minutes: number; warnBelow?: number; className?: string }) {
  const abs = Math.abs(Math.round(minutes))
  const h = Math.floor(abs / 60)
  const label = `${minutes < 0 ? "−" : ""}${h >= 48 ? `${Math.floor(h / 24)}d ${String(h % 24).padStart(2, "0")}h` : `${String(h).padStart(2, "0")}:${String(abs % 60).padStart(2, "0")}`}`
  const tone =
    minutes < 0
      ? "bg-destructive-subtle text-destructive animate-tick"
      : minutes < warnBelow
        ? "bg-warning-subtle text-warning"
        : "bg-success-subtle text-success"
  return (
    <span data-slot="sla-chip" className={cn("inline-flex h-[22px] items-center gap-1.5 rounded-sm px-[7px] font-mono text-xs font-medium tabular-nums", tone, className)}>
      <Clock className="size-3 stroke-2" aria-hidden />
      {label}
      <span className="sr-only">{minutes < 0 ? "past SLA, breached" : "until SLA"}</span>
    </span>
  )
}