1
import { type HTMLAttributes, type ReactNode } from "react";
2
 
3
type Tone = "neutral" | "accent" | "success" | "warning" | "danger";
4
 
5
type Props = HTMLAttributes<HTMLSpanElement> & { tone?: Tone; children: ReactNode };
6
 
7
const tones: Record<Tone, string> = {
8
  neutral: "border-zinc-700/60 bg-zinc-800/60 text-zinc-300",
9
  accent: "border-accent-500/20 bg-accent-500/10 text-accent-300",
10
  success: "border-emerald-500/20 bg-emerald-500/10 text-emerald-300",
11
  warning: "border-amber-500/20 bg-amber-500/10 text-amber-200",
12
  danger: "border-red-500/20 bg-red-500/10 text-red-300",
13
};
14
 
15
export function Badge({ tone = "neutral", className = "", children, ...rest }: Props) {
16
  return (
17
    <span
18
      className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium ${tones[tone]} ${className}`}
19
      {...rest}
20
    >
21
      {children}
22
    </span>
23
  );
24
}