1
import type { ReactNode } from "react";
2
 
3
type BadgeVariant = "default" | "accent" | "success" | "error" | "warning";
4
 
5
interface BadgeProps {
6
  variant?: BadgeVariant;
7
  children: ReactNode;
8
  className?: string;
9
}
10
 
11
const VARIANT_CLASSES: Record<BadgeVariant, string> = {
12
  default: "border-zinc-800/60 bg-zinc-950/60 text-zinc-500",
13
  accent: "border-accent-500/20 bg-accent-500/10 text-accent-400",
14
  success: "border-emerald-500/20 bg-emerald-500/10 text-emerald-400",
15
  error: "border-red-500/20 bg-red-500/10 text-red-400",
16
  warning: "border-amber-500/20 bg-amber-500/10 text-amber-300",
17
};
18
 
19
export const Badge = ({ variant = "default", children, className }: BadgeProps) => (
20
  <span
21
    className={[
22
      "inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium uppercase tracking-[0.18em]",
23
      VARIANT_CLASSES[variant],
24
      className,
25
    ]
26
      .filter(Boolean)
27
      .join(" ")}
28
  >
29
    {children}
30
  </span>
31
);