Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 1x 1x 1x 1x 5x | import type { HTMLAttributes } from "react";
import { cn } from "@/utils/class-name";
const BADGE_VARIANT_CLASSES = {
neutral:
"app-badge-neutral border-white/20 bg-white/8 text-white/80 light:border-app-border-10 light:bg-app-surface-6 light:text-app-fg-muted",
subtle:
"app-badge-subtle border-white/16 bg-white/5 text-white/62 light:border-app-border-8 light:bg-app-surface-4 light:text-app-muted-65",
brand:
"app-badge-brand border-violet-400/35 bg-violet-500/16 text-violet-200 light:border-amber-300/70 light:bg-amber-50 light:text-amber-950",
providerOllama:
"app-badge-provider-ollama border-violet-400/35 bg-violet-500/16 text-violet-200 light:border-stone-300/80 light:bg-stone-100 light:text-stone-800",
providerOpenai:
"app-badge-provider-openai border-emerald-400/35 bg-emerald-500/15 text-emerald-100 light:border-emerald-300/70 light:bg-emerald-100 light:text-emerald-900",
info: "app-badge-info border-cyan-400/30 bg-cyan-500/14 text-cyan-100 light:border-cyan-300/70 light:bg-cyan-100 light:text-cyan-900",
success:
"app-badge-success border-emerald-400/35 bg-emerald-500/15 text-emerald-100 light:border-emerald-300/70 light:bg-emerald-100 light:text-emerald-900",
warning:
"app-badge-warning border-amber-300/35 bg-amber-500/15 text-amber-100 light:border-amber-300/70 light:bg-amber-100 light:text-amber-900",
danger:
"app-badge-danger border-rose-400/35 bg-rose-500/15 text-rose-100 light:border-rose-300/70 light:bg-rose-100 light:text-rose-900",
} as const;
const BADGE_SIZE_CLASSES = {
sm: "px-2 py-0.5 text-[10px]",
md: "px-2.5 py-0.5 text-[11px]",
lg: "px-3 py-1 text-xs",
} as const;
export type BadgeVariant = keyof typeof BADGE_VARIANT_CLASSES;
export type BadgeSize = keyof typeof BADGE_SIZE_CLASSES;
export const BADGE_VARIANT_OPTIONS = Object.keys(
BADGE_VARIANT_CLASSES,
) as BadgeVariant[];
export const BADGE_SIZE_OPTIONS = Object.keys(
BADGE_SIZE_CLASSES,
) as BadgeSize[];
export type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
variant?: BadgeVariant;
size?: BadgeSize;
};
export function Badge({
variant = "neutral",
size = "md",
className,
...props
}: BadgeProps) {
return (
<span
className={cn(
"inline-flex rounded-full border font-medium",
BADGE_VARIANT_CLASSES[variant],
BADGE_SIZE_CLASSES[size],
className,
)}
{...props}
/>
);
}
|