1
import type { ReactNode } from "react";
2
 
3
type BadgeVariant = "default" | "accent" | "success" | "error" | "warning";
4
 
5
type BadgeProps = {
6
  variant?: BadgeVariant;
7
  children: ReactNode;
8
  className?: string;
9
};
10
 
11
const variantStyles: Record<BadgeVariant, string> = {
12
  default:
13
    "bg-zinc-100 dark:bg-zinc-800/60 text-zinc-700 dark:text-zinc-300 border border-zinc-300 dark:border-zinc-700/60",
14
  accent: "bg-accent-500/10 text-accent-700 dark:text-accent-400 border border-accent-500/20",
15
  success: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border border-emerald-500/20",
16
  error: "bg-red-500/10 text-red-700 dark:text-red-400 border border-red-500/20",
17
  warning: "bg-amber-500/10 text-amber-700 dark:text-amber-300 border border-amber-500/20",
18
};
19
 
20
export function Badge({ variant = "default", className = "", children }: BadgeProps) {
21
  return (
22
    <span
23
      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${variantStyles[variant]} ${className}`.trim()}
24
    >
25
      {children}
26
    </span>
27
  );
28
}