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

Async API docs for Redocly Realm

import{jsx as o,jsxs as i}from"react/jsx-runtime";import t from"styled-components";import{useState as c,useRef as d}from"react";import{Button as m}from"@redocly/theme/components/Button/Button";import{Typography as g}from"@redocly/theme/components/Typography/Typography";import{Segmented as v}from"@redocly/theme/components/Segmented/Segmented";import{CloseIcon as f}from"@redocly/theme/icons/CloseIcon/CloseIcon";import{DatabaseIcon as h}from"@redocly/theme/icons/DatabaseIcon/DatabaseIcon";import{KafkaIcon as u}from"@redocly/theme/icons/KafkaIcon/KafkaIcon";import{RabbitMQIcon as x}from"@redocly/theme/icons/RabbitMQIcon/RabbitMQIcon";import{useOutsideClick as b}from"@redocly/theme/core/hooks";import{useFocusTrap as S}from"@redocly/theme/core/hooks";import{ServerOverviewSection as w}from"./ServerOverviewSection.js";import{ServerBindingsSection as k}from"./ServerBindingsSection.js";const y=[{label:"Overview",value:0}],z=({protocol:e})=>{switch(e){case"kafka":return o(u,{size:"24px"});case"amqp":return o(x,{size:"24px"});default:return o(h,{size:"24px"})}},A=({server:e,onClose:n})=>{const[r,l]=c(0),a=d(null);b(a,n),S(a);const s=[...y];return e.value.bindings&&s.push({label:"Configuration",value:2}),o(I,{"data-component-name":"ServerModal/ServerModal",children:i(B,{ref:a,tabIndex:0,children:[o(C,{onClick:n,"data-testid":"close",variant:"ghost",icon:o(f,{})}),i(M,{children:[o(z,{protocol:e.value.protocol}),o(O,{children:e.value.protocol}),": ",e.key]}),o(v,{value:r,onChange:({value:p})=>l(p),options:s}),i(T,{children:[r===0&&o(w,{server:e.value}),r===2&&o(k,{server:e.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(m)`
  position: absolute;
  right: var(--spacing-md);
  top: var(--spacing-md);
`,M=t(g)`
  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{A as ServerModal};