50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import * as React from "react";
|
|
import { Badge as KumoBadge } from "@cloudflare/kumo/components/badge";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type KumoBadgeProps = React.ComponentProps<typeof KumoBadge>;
|
|
|
|
type LegacyBadgeVariant = "default" | "secondary" | "outline" | "success" | "warning" | "danger";
|
|
|
|
const variantMap: Record<LegacyBadgeVariant, KumoBadgeProps["variant"]> = {
|
|
default: "green",
|
|
secondary: "secondary",
|
|
outline: "outline",
|
|
success: "success",
|
|
warning: "warning",
|
|
danger: "error",
|
|
};
|
|
|
|
export type BadgeProps = Omit<KumoBadgeProps, "variant"> & {
|
|
variant?: LegacyBadgeVariant | KumoBadgeProps["variant"];
|
|
};
|
|
|
|
function isLegacyBadgeVariant(variant: BadgeProps["variant"]): variant is LegacyBadgeVariant {
|
|
switch (variant) {
|
|
case "default":
|
|
case "secondary":
|
|
case "outline":
|
|
case "success":
|
|
case "warning":
|
|
case "danger":
|
|
return true;
|
|
default:
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function mapBadgeVariant(variant: BadgeProps["variant"]): KumoBadgeProps["variant"] {
|
|
if (isLegacyBadgeVariant(variant)) {
|
|
return variantMap[variant];
|
|
}
|
|
|
|
return variant;
|
|
}
|
|
|
|
export function Badge({ className, variant = "default", ...props }: BadgeProps): React.ReactElement {
|
|
const mappedVariant = mapBadgeVariant(variant);
|
|
|
|
return <KumoBadge className={cn("teatea-badge", className)} variant={mappedVariant} {...props} />;
|
|
}
|