import { Badge as KumoBadge } from "@cloudflare/kumo/components/badge";
import type { Tone } from "~/ui/tones";
type KumoBadgeVariant = NonNullable<React.ComponentProps<typeof KumoBadge>["variant"]>;
const TONE_VARIANT: Record<Tone, KumoBadgeVariant> = {
neutral: "secondary",
accent: "primary",
success: "green",
warning: "orange",
danger: "red",
merged: "purple",
};
type Props = { tone?: Tone; children: React.ReactNode; className?: string };
export function Badge({ tone = "neutral", children, className }: Props) {
return (
<KumoBadge variant={TONE_VARIANT[tone]} className={className}>
{children}
</KumoBadge>
);
}