53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T376b,"use client" import * as React from "react" import { cn } from "@/lib/utils" type GatewayEndpointIds = { clip: string circle1: string circle2: string circle3: string inputLine: string } export interface GatewayEndpointProps extends Omit, "width" | "height"> { width?: number height?: number backgroundColor?: string circleStrokeColor?: string centerCircleStroke?: string logoColor?: string iconColor?: string inputLineColor?: string topLeftLineColor?: string bottomLeftLineColor?: string topRightLineColor?: string bottomRightLineColor?: string iconBoxFill?: string iconBoxStroke?: string showRadialCircles?: boolean topLeftIcon?: React.ReactNode topRightIcon?: React.ReactNode bottomLeftIcon?: React.ReactNode bottomRightIcon?: React.ReactNode } function buildGatewayEndpointIds(id: string): GatewayEndpointIds { const base = id.replaceAll(":", "") return { clip: `${base}-clip`, circle1: `${base}-circle1`, circle2: `${base}-circle2`, circle3: `${base}-circle3`, inputLine: `${base}-input-line`, } } function GatewayEndpointSvg({ className, width = 264, height = 120, ...props }: React.ComponentProps<"svg">) { return ( ) } function GatewayEndpointDefs({ ids, circleStrokeColor, backgroundColor, inputLineColor, }: { ids: GatewayEndpointIds circleStrokeColor: string backgroundColor: string inputLineColor: string }) { return ( ) } function GatewayEndpointScene({ ids, children, }: React.PropsWithChildren<{ ids: GatewayEndpointIds }>) { return ( {children} ) } function GatewayEndpointBackground({ backgroundColor, }: { backgroundColor: string }) { return ( ) } function GatewayEndpointRadialCircles({ ids }: { ids: GatewayEndpointIds }) { return ( ) } function GatewayEndpointInputLine({ ids }: { ids: GatewayEndpointIds }) { return ( ) } function GatewayEndpointConnectionLines({ topLeftLineColor, bottomLeftLineColor, topRightLineColor, bottomRightLineColor, }: { topLeftLineColor: string bottomLeftLineColor: string topRightLineColor: string bottomRightLineColor: string }) { return ( ) } function GatewayEndpointCenter({ logoColor, centerCircleStroke, }: { logoColor: string centerCircleStroke: string }) { return ( ) } function GatewayEndpointIconBubble({ x, y, fill, stroke, children, }: { x: number y: number fill: string stroke: string children: React.ReactNode }) { return ( {children} ) } function GatewayEndpoint({ width = 264, height = 120, // backgroundColor = "#FAFAFA", backgroundColor = "transparent", circleStrokeColor = "#EAEAEA", centerCircleStroke = "#C9C9C9", logoColor = "black", iconColor = "#171717", inputLineColor = "#C9C9C9", topLeftLineColor = "#0067D6", bottomLeftLineColor = "#067A6F", topRightLineColor = "#CA2A30", bottomRightLineColor = "#FFB224", iconBoxFill = "white", iconBoxStroke = "#EAEAEA", showRadialCircles = true, topLeftIcon, topRightIcon, bottomLeftIcon, bottomRightIcon, className, ...props }: GatewayEndpointProps) { const ids = buildGatewayEndpointIds(React.useId()) return ( {showRadialCircles ? : null} {topLeftIcon ?? } {topRightIcon ?? } {bottomRightIcon ?? } {bottomLeftIcon ?? } ) } function OpenAIIcon({ color = "#171717" }: { color?: string }) { return ( ) } function AnthropicIcon({ color = "#171717" }: { color?: string }) { return ( ) } function XAIIcon({ color = "#171717" }: { color?: string }) { return ( ) } function MoreIcon({ color = "#171717" }: { color?: string }) { return ( ) } function VercelLogo({ color = "black" }: { color?: string }) { return ( ) } export { GatewayEndpoint, GatewayEndpointSvg, GatewayEndpointDefs, GatewayEndpointScene, GatewayEndpointBackground, GatewayEndpointRadialCircles, GatewayEndpointInputLine, GatewayEndpointConnectionLines, GatewayEndpointCenter, GatewayEndpointIconBubble, OpenAIIcon, AnthropicIcon, XAIIcon, MoreIcon, VercelLogo, } 52:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L53",null,{"files":[{"path":"registry/default/ui/gateway-endpoint-illustration.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]