32 lines
1.3 KiB
TypeScript
32 lines
1.3 KiB
TypeScript
// Shared mark lookup for everything that names an AI client: the connect
|
|
// dialog's setup guides and connection rows, and the OAuth consent screen.
|
|
// The icon id itself is decided in the view-model (`resolveMcpClientIcon`), so
|
|
// this module only maps an id to a glyph.
|
|
|
|
import { FeatherCode, FeatherLink } from "@subframe/core";
|
|
|
|
import { ChatGptMark, ClaudeCodeMark, ClaudeMark, CodexMark, CopilotMark, GeminiMark } from "./AiClientMarks";
|
|
|
|
// Brand marks where a client has one, generic icons for the catch-all rows.
|
|
export const CLIENT_ICONS: Record<string, React.ReactNode> = {
|
|
claude: <ClaudeMark className="h-full w-full" />,
|
|
"claude-code": <ClaudeCodeMark className="h-full w-full" />,
|
|
chatgpt: <ChatGptMark className="text-icon-neutral-primary h-full w-full" />,
|
|
codex: <CodexMark className="h-full w-full" />,
|
|
copilot: <CopilotMark className="h-full w-full" />,
|
|
gemini: <GeminiMark className="h-full w-full" />,
|
|
code: <FeatherCode />,
|
|
link: <FeatherLink />,
|
|
};
|
|
|
|
/** Square, currentColor-tinted slot for one client's mark. */
|
|
export function ClientIcon({ icon, className = "h-4 w-4" }: { icon: string; className?: string }) {
|
|
return (
|
|
<span
|
|
className={`text-icon-neutral-secondary flex shrink-0 items-center justify-center [&>svg]:h-full [&>svg]:w-full ${className}`}
|
|
>
|
|
{CLIENT_ICONS[icon] ?? <FeatherLink />}
|
|
</span>
|
|
);
|
|
}
|