Status badge

1import * as React from "react";
2import { cva, type VariantProps } from "class-variance-authority";
3 
4import { cn } from "@/lib/utils";
5 
6const statusBadgeVariants = cva(
7  [
8    "inline-flex items-center gap-1.5 px-1.5 h-5 rounded-[2px]",
9    "text-mono text-[10px] uppercase tracking-[0.1em] font-semibold",
10    "border whitespace-nowrap",
11  ].join(" "),
12  {
13    variants: {
14      status: {
15        active: "bg-success/15 text-success border-success/40",
16        idle: "bg-foreground/10 text-foreground-muted border-border-strong",
17        offline: "bg-foreground/5 text-foreground-subtle border-border",
18        new: "bg-danger/15 text-danger border-danger/40",
19        high: "bg-warning/15 text-warning border-warning/40",
20        critical: "bg-danger/20 text-danger border-danger/60",
21        compromised: "bg-danger/15 text-danger border-danger/40",
22        nominal: "bg-info/15 text-info border-info/40",
23        warning: "bg-warning/15 text-warning border-warning/40",
24        secured: "bg-primary/15 text-primary border-primary/40",
25      },
26      pulse: {
27        true: "",
28        false: "",
29      },
30    },
31    defaultVariants: {
32      status: "active",
33      pulse: false,
34    },
35  },
36);
37 
38const dotColor: Record<string, string> = {
39  active: "bg-success",
40  idle: "bg-foreground-muted",
41  offline: "bg-foreground-subtle",
42  new: "bg-danger",
43  high: "bg-warning",
44  critical: "bg-danger",
45  compromised: "bg-danger",
46  nominal: "bg-info",
47  warning: "bg-warning",
48  secured: "bg-primary",
49};
50 
51export interface StatusBadgeProps
52  extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof statusBadgeVariants> {
53  /** Show a leading dot indicator. */
54  dot?: boolean;
55  children?: React.ReactNode;
56}
57 
58const StatusBadge = React.memo(function StatusBadge({
59  className,
60  status = "active",
61  pulse,
62  dot = true,
63  children,
64  ...props
65}: StatusBadgeProps) {
66  const key = status ?? "active";
67  return (
68    <span className={cn(statusBadgeVariants({ status, pulse }), className)} {...props}>
69      {dot && (
70        <span className="relative inline-flex h-1.5 w-1.5 shrink-0">
71          <span className={cn("absolute inset-0 rounded-full", dotColor[key])} />
72          {pulse && (
73            <span
74              className={cn("absolute inset-0 animate-ping rounded-full opacity-60", dotColor[key])}
75            />
76          )}
77        </span>
78      )}
79      <span>{children ?? key.toUpperCase()}</span>
80    </span>
81  );
82});
83 
84export { StatusBadge, statusBadgeVariants };