19 lines · 463 B
import { cn } from "~/utils/cn";
import { TONE_BADGE, type Tone } from "~/ui/tones";

type Props = { tone?: Tone; children: React.ReactNode; className?: string };

export function Badge({ tone = "neutral", children, className }: Props) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
        TONE_BADGE[tone],
        className,
      )}
    >
      {children}
    </span>
  );
}