@redocly/asyncapi-docs/lib-esm/src/components/ServerModal.js

Async API docs for Redocly Realm

import{jsx as e,jsxs as i}from"react/jsx-runtime";import{CloseIcon as d,DatabaseIcon as p,KafkaIcon as g,RabbitMQIcon as v,useOutsideClick as h,useFocusTrap as u,Segmented as m,Button as f,Typography as x}from"@redocly/theme";import t from"styled-components";import{useState as b,useRef as S}from"react";import{ServerOverviewSection as w}from"./ServerOverviewSection";import{ServerBindingsSection as k}from"./ServerBindingsSection";const y=[{label:"Overview",value:0}],z=({protocol:o})=>{switch(o){case"kafka":return e(g,{size:"24px"});case"amqp":return e(v,{size:"24px"});default:return e(p,{size:"24px"})}},W=({server:o,onClose:n})=>{const[a,l]=b(0),r=S(null);h(r,n),u(r);const s=[...y];return o.value.bindings&&s.push({label:"Configuration",value:2}),e(I,{"data-component-name":"ServerModal/ServerModal",children:i(B,{ref:r,tabIndex:0,children:[e(C,{onClick:n,"data-testid":"close",variant:"ghost",icon:e(d,{})}),i(M,{children:[e(z,{protocol:o.value.protocol}),e(O,{children:o.value.protocol}),": ",o.key]}),e(m,{value:a,onChange:({value:c})=>l(c),options:s}),i(T,{children:[a===0&&e(w,{server:o.value}),a===2&&e(k,{server:o.value})]})]})})},I=t.div`
  background: var(--bg-color-modal-overlay);
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-index-popover);
  left: 0;
  top: 0;
  pointer-events: auto;
`,B=t.div`
  background: var(--bg-color);
  box-shadow: var(--bg-raised-shadow);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  width: 720px;
  max-width: 100%;
  height: auto;
  max-height: 600px;
  overflow-y: scroll;
  left: 50%;
  top: 100px;
  transform: translateX(-50%);
  .tag-grey span {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }
`,C=t(f)`
  position: absolute;
  right: var(--spacing-md);
  top: var(--spacing-md);
`,M=t(x)`
  display: flex;
  align-items: center;
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  margin-bottom: var(--spacing-lg);
  svg {
    margin-right: var(--spacing-xs);
  }
`,O=t.span`
  text-transform: capitalize;
`,T=t.div`
  padding-top: var(--spacing-base);
  width: 100%;
`;export{W as ServerModal};