1
import type { HTMLAttributes, ReactNode } from "react";
2
 
3
const variantClasses = {
4
  default: "border-zinc-800/60 bg-zinc-900 text-zinc-400",
5
  accent: "bg-accent-500/10 text-accent-400",
6
  success: "bg-emerald-500/10 text-emerald-400",
7
  warning: "border-amber-500/20 bg-amber-500/10 text-amber-300",
8
  danger: "border-red-500/20 bg-red-500/10 text-red-400",
9
  muted: "bg-zinc-700/60 text-zinc-300",
10
} as const;
11
 
12
export type BadgeVariant = keyof typeof variantClasses;
13
 
14
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
15
  variant?: BadgeVariant;
16
  icon?: ReactNode;
17
}
18
 
19
export function Badge({ variant = "default", icon, children, className, ...rest }: BadgeProps) {
20
  return (
21
    <span
22
      className={[
23
        "inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-semibold",
24
        variantClasses[variant],
25
        className,
26
      ]
27
        .filter(Boolean)
28
        .join(" ")}
29
      {...rest}
30
    >
31
      {icon}
32
      {children}
33
    </span>
34
  );
35
}