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

Async API docs for Redocly Realm

import{jsx as a,jsxs as c}from"react/jsx-runtime";import o from"styled-components";import{useNavigate as b}from"react-router-dom";import{SamplesPanel as y}from"@redocly/openapi-docs";import{LayoutVariant as w,Button as k}from"@redocly/theme";import{useAtomValue as S}from"jotai/index";import{useMemo as I,useState as z}from"react";import{layoutAtom as A}from"../jotai/app";import{ActionTag as j}from"./common";import{useProtocolLabels as C}from"../hooks";const p=8,X=({items:t,firstChannelBinding:m})=>{const[n,f]=z(!1),{getProtocolLabel:r}=C(m),g=b(),u=S(A)===w.STACKED,{displayItems:v,count:d}=I(()=>{const e=t?.filter(l=>l.type==="channel")||[],i=n?e:e.slice(0,p),s=!n&&e.length>p?e.length-p:0;return{displayItems:i,count:s}},[t,n]),x=e=>{g(e)};return c(P,{isStacked:u,children:[a(B,{children:r("channels")}),v.map(({id:e,type:i,label:s,link:l})=>i==="channel"?a(E,{variant:"outlined",size:"large",onClick:()=>x(l),children:c("span",{children:[a(j,{color:r("channel").toLowerCase(),children:r("channel")}),a(L,{children:s})]})},e):null),!n&&!!d&&c(h,{variant:"link",size:"large","data-testid":"show-more-operations",fullWidth:!0,onClick:()=>f(!0),children:["Show ",d," more..."]})]})},P=o(y)`
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  padding-top: var(--spacing-xxl);
`,h=o(k)`
  & + & {
    margin-left: 0;
  }
`,E=o(h)`
  border-radius: var(--border-radius);
  background: var(--bg-color);
  justify-content: space-between;

  & > span {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-unit);
    overflow-x: hidden;
  }

  &:hover {
    background: var(--bg-color);
  }

  &:hover::after {
    content: '→';
    line-height: var(--line-height-base);
  }
`,L=o.span`
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-color-primary);
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
`,B=o.span`
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-bold);
  color: var(--text-color-primary);
  margin: var(--spacing-sm) 0 var(--spacing-xxs) 0;
`;export{X as ItemsNavigation};