diff --git a/apps/site/src/app/mcp/_components/agent-card.tsx b/apps/site/src/app/mcp/_components/agent-card.tsx index 376a228fed..d334781f7a 100644 --- a/apps/site/src/app/mcp/_components/agent-card.tsx +++ b/apps/site/src/app/mcp/_components/agent-card.tsx @@ -1,45 +1,75 @@ +"use client"; + import Image from "next/image"; +import { useState } from "react"; + +import { Tooltip, TooltipContent, TooltipTrigger } from "@prisma/eclipse"; export function AgentCard({ logo, alt, icon, href, + copyText, }: { logo: string | null; alt: string; icon: string | null; - href: string; + href?: string; + copyText?: string; }) { + const [copied, setCopied] = useState(false); + + const isCopyAction = !!copyText; + const isExternalLink = !isCopyAction && href?.startsWith("http"); + + const handleClick = (e: React.MouseEvent) => { + if (!isCopyAction) return; + e.preventDefault(); + navigator.clipboard.writeText(copyText); + setCopied(true); + setTimeout(() => setCopied(false), 1500); + }; + + const Tag = isCopyAction ? "button" : "a"; + const linkProps = isCopyAction + ? { type: "button" as const, onClick: handleClick } + : { + href, + ...(isExternalLink ? { target: "_blank", rel: "noopener noreferrer" } : {}), + }; + return ( - - {logo ? ( - - ) : ( - - Any AI agent - - )} - {icon ? ( - + + - - - ) : null} - + {logo ? ( + + ) : ( + Any AI agent + )} + {icon ? ( + + + + ) : null} + + + {copied ? "Copied!" : alt} + ); } diff --git a/apps/site/src/app/mcp/_components/mcp-agents-section.tsx b/apps/site/src/app/mcp/_components/mcp-agents-section.tsx index 9cff01c390..1472fe030a 100644 --- a/apps/site/src/app/mcp/_components/mcp-agents-section.tsx +++ b/apps/site/src/app/mcp/_components/mcp-agents-section.tsx @@ -1,4 +1,15 @@ -import { Button } from "@prisma/eclipse"; +"use client"; + +import Script from "next/script"; + +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, + TooltipProvider, +} from "@prisma/eclipse"; import { AgentCard } from "./agent-card"; @@ -6,16 +17,11 @@ export type McpAgent = { logo: string | null; alt: string; icon: string | null; - href: string; + href?: string; + copyText?: string; }; -export function McpAgentsSection({ - docsHref, - agents, -}: { - docsHref: string; - agents: readonly McpAgent[]; -}) { +export function McpAgentsSection({ agents }: { docsHref: string; agents: readonly McpAgent[] }) { return ( @@ -29,19 +35,44 @@ export function McpAgentsSection({ - - {agents.map(({ logo, alt, icon, href }) => ( - - ))} - + + + {agents.map((agent) => ( + + ))} + + - - Want to see your tool listed? - + + + + Want to see your tool listed? + + + + + Want to see your favorite AI tool listed on prisma.io/mcp? + + +