@redocly/asyncapi-docs
Version:
Async API docs for Redocly Realm
11 lines (10 loc) • 1.1 kB
JavaScript
import{jsx as s,jsxs as p}from"react/jsx-runtime";import{Panel as h,PanelBody as f,PanelHeader as u,JsonViewer as g}from"@redocly/theme";import d from"styled-components";import{ExampleSwitch as v}from"@redocly/openapi-docs";import{useEffect as y,useMemo as w,useState as x}from"react";import{useProtocolLabels as E,useOtelTelemetry as P}from"../hooks";const M=({examples:e})=>{const[o,a]=x(e[0]),{getProtocolLabel:i}=E(),r=P();y(()=>{a(e[0])},[e,a]);const c=n=>{const t=e?.find(l=>l.name===n);t&&(a(t),r.send({type:"asyncapi_docs.switch_example.clicked",payload:{example:n,number_of_examples:e.length}}))},m=w(()=>e?.reduce((n,t,l)=>(n[t.name||`Example ${l+1}`]=Object.assign({},t),n),{}),[e]);return p(S,{className:"panel-messages-samples",header:()=>s(_,{isExpandable:!1,children:i("payload")}),children:[s(b,{examples:m,exampleKey:o?.name,onChange:c}),s(g,{data:o?.payload,expandLevel:3})]})},S=d(h)`
${f} {
padding: var(--spacing-sm) 0 0;
line-height: var(--line-height-md);
}
`,_=d(u)`
font-weight: var(--font-weight-regular);
`,b=d(v)`
overflow: hidden;
`;export{M as SamplesPanel};