24 lines
975 B
TypeScript
24 lines
975 B
TypeScript
|
interface BadgeProps {
|
||
|
|
children: React.ReactNode;
|
||
|
|
variant?: "default" | "green" | "yellow" | "red" | "blue";
|
||
|
|
}
|
||
|
|
|
||
|
|
const variantStyles: Record<string, React.CSSProperties> = {
|
||
|
|
default: { background: "var(--surface)", color: "var(--text-2)", border: "1px solid var(--border)" },
|
||
|
|
green: { background: "rgba(52,211,153,0.08)", color: "#34d399", border: "1px solid rgba(52,211,153,0.2)" },
|
||
|
|
yellow: { background: "rgba(245,158,11,0.08)", color: "#f59e0b", border: "1px solid rgba(245,158,11,0.2)" },
|
||
|
|
red: { background: "rgba(239,68,68,0.08)", color: "#f87171", border: "1px solid rgba(239,68,68,0.2)" },
|
||
|
|
blue: { background: "rgba(99,102,241,0.08)", color: "var(--accent-text)", border: "1px solid var(--accent-border)" },
|
||
|
|
};
|
||
|
|
|
||
|
|
export function Badge({ children, variant = "default" }: BadgeProps) {
|
||
|
|
return (
|
||
|
|
<span
|
||
|
|
className="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium font-mono"
|
||
|
|
style={variantStyles[variant]}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|