mirror of
https://github.com/trustgraph-ai/trustgraph.git
synced 2026-07-01 09:29:38 +02:00
ad40332d56
git-subtree-dir: ai-context/trustgraph-templates git-subtree-split: 338a8ffadb1439013071ae922e55ed2421f17025
39 lines
988 B
TypeScript
39 lines
988 B
TypeScript
interface BadgeProps {
|
|
children: React.ReactNode;
|
|
color: string;
|
|
size?: "small" | "medium";
|
|
selected?: boolean;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export function Badge({
|
|
children,
|
|
color,
|
|
size = "medium",
|
|
selected = false,
|
|
onClick,
|
|
}: BadgeProps) {
|
|
const isSmall = size === "small";
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
style={{
|
|
padding: isSmall ? "3px 8px" : "6px 12px",
|
|
borderRadius: isSmall ? 4 : 6,
|
|
border: `1px solid ${selected ? color : color + (isSmall ? "22" : "44")}`,
|
|
background: selected ? `${color}35` : `${color}${isSmall ? "10" : "15"}`,
|
|
color: isSmall ? color + "cc" : color,
|
|
cursor: onClick ? "pointer" : "default",
|
|
fontSize: isSmall ? 10 : 11,
|
|
fontFamily: "'IBM Plex Mono', monospace",
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
gap: 6,
|
|
boxShadow: selected ? `0 0 8px ${color}44` : "none",
|
|
}}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|