f674ce0c22
- Add MCP logo (light/dark variants) to ConnectedLayout header - Replace Tabs with SegmentedControl in header, split into 1/3 sections - Wrap all screens in Container for consistent margins - Use Card instead of Paper for panel backgrounds across all screens - Add SubscribeButton atom, CopyButton for resource URI - Move annotations from ResourceListItem to ResourcePreviewPanel - Improve AnnotationBadge colors for dark mode visibility - Add Tools, Resources, and Prompts headers to list panels - Add ConnectedLayout stories for Tools, Resources, and Prompts tabs - Remove unused onCopy prop and copy button from PromptMessagesDisplay Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { Badge, useComputedColorScheme } from "@mantine/core";
|
|
|
|
export type AnnotationVariant =
|
|
| "audience"
|
|
| "readOnly"
|
|
| "destructive"
|
|
| "longRun"
|
|
| "priority"
|
|
| "default";
|
|
|
|
export interface AnnotationBadgeProps {
|
|
label: string;
|
|
variant?: AnnotationVariant;
|
|
}
|
|
|
|
const variantMap: Record<
|
|
AnnotationVariant,
|
|
{ color: string; variant: string }
|
|
> = {
|
|
audience: { color: "blue", variant: "outline" },
|
|
readOnly: { color: "green", variant: "filled" },
|
|
destructive: { color: "red", variant: "filled" },
|
|
longRun: { color: "yellow", variant: "filled" },
|
|
priority: { color: "orange", variant: "filled" },
|
|
default: { color: "gray", variant: "light" },
|
|
};
|
|
|
|
export function AnnotationBadge({
|
|
label,
|
|
variant = "default",
|
|
}: AnnotationBadgeProps) {
|
|
const colorScheme = useComputedColorScheme();
|
|
const { color, variant: badgeVariant } = variantMap[variant];
|
|
const textColor =
|
|
(variant === "priority" || variant === "destructive") && colorScheme === "dark" ? "black" : undefined;
|
|
|
|
return (
|
|
<Badge color={color} variant={badgeVariant} c={textColor}>
|
|
{label}
|
|
</Badge>
|
|
);
|
|
}
|