27 lines
1.1 KiB
TypeScript
27 lines
1.1 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
variant?: "default" | "red" | "orange" | "yellow" | "green" | "blue" | "cyan";
|
|
}
|
|
|
|
export function Badge({ className, variant = "default", ...props }: BadgeProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
{
|
|
"border-primary/20 bg-primary/10 text-primary": variant === "default",
|
|
"border-red-500/20 bg-red-500/10 text-red-500": variant === "red",
|
|
"border-orange-500/20 bg-orange-500/10 text-orange-500": variant === "orange",
|
|
"border-yellow-500/20 bg-yellow-500/10 text-yellow-500": variant === "yellow",
|
|
"border-emerald-500/20 bg-emerald-500/10 text-emerald-500": variant === "green",
|
|
"border-blue-500/20 bg-blue-500/10 text-blue-500": variant === "blue",
|
|
"border-cyan-500/20 bg-cyan-500/10 text-cyan-500": variant === "cyan",
|
|
},
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|