@redocly/asyncapi-docs/lib/components/Server.js

Async API docs for Redocly Realm

import{jsx as e,jsxs as n}from"react/jsx-runtime";import r from"styled-components";import{useState as f}from"react";import{DatabaseIcon as u}from"@redocly/theme/icons/DatabaseIcon/DatabaseIcon";import{KafkaIcon as x}from"@redocly/theme/icons/KafkaIcon/KafkaIcon";import{RabbitMQIcon as g}from"@redocly/theme/icons/RabbitMQIcon/RabbitMQIcon";import{CopyButton as h}from"@redocly/theme/components/Buttons/CopyButton";import{Portal as v}from"@redocly/theme/components/Portal/Portal";import{useModalScrollLock as y}from"@redocly/theme/core/hooks";import{Tooltip as b}from"@redocly/theme/components/Tooltip/Tooltip";import{ServerModal as M}from"./ServerModal.js";import{MoreDetailsButton as S,HostList as k}from"./common/index.js";import{useTelemetry as w}from"../hooks/index.js";import{useTranslate as j}from"../hooks/index.js";const G=({server:t,showDetails:s})=>{const[i,a]=f(!1),l=w(),p=j();y(i);const c=o=>{switch(o){case"kafka":return e(x,{size:"20px"});case"amqp":return e(g,{size:"20px"});default:return e(u,{size:"20px"})}},d=()=>{var o;a(!0),l.sendServerModalOpenedMessage([{id:"serverModalButton",object:"button",uri:"urn:redocly:redoc:ui:button:serverModalButton",server:(o=t.key)!==null&&o!==void 0?o:"unknown"}])};return n(I,{"data-component-name":"Server/Server",children:[n(T,{children:[e(B,{children:c(t.value.protocol)}),e(C,{children:t.key})]}),n(z,{children:[e(k,{children:t.value.host.split(" ").map((o,m)=>e("span",{children:o},m))}),e(b,{tip:p("button.copy.tooltipText","Copy to clipboard"),placement:"top",arrowPosition:"right",children:e(h,{data:t.value.host},t.value.host)})]}),s&&e(L,{onClick:d,children:e(S,{expanded:!1})}),i&&e(v,{mountId:"api-content",children:e(M,{server:t,onClose:()=>a(!1)})})]})},I=r.div`
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  padding: var(--spacing-sm) var(--spacing-md);
`,B=r.div`
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
`,T=r.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-xxs);
`,z=r.span`
  padding-left: var(--spacing-lg);
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
`,C=r.span`
  font-weight: var(--font-weight-semibold);
  text-transform: capitalize;
`,L=r.div`
  padding-left: var(--spacing-lg);
`;export{G as Server};