@redocly/graphql-docs/lib-esm/src/navigation/components/Overview.js

Redocly GraphQL docs

import{jsx as e,jsxs as i,Fragment as x}from"react/jsx-runtime";import{memo as O,useMemo as y}from"react";import{H1 as k,H2 as j,isNotNull as M,useThemeHooks as P,LinkIcon as S,Panel as m,breakpoints as v,PageActions as q}from"@redocly/theme";import{styled as o}from"../../styled-components.js";import{useSettings as L}from"../../settings/index.js";import{Box as I}from"../../common/index.js";import{ShareLink as N,useBaseUrlPath as U}from"../index.js";import{DownloadSpecification as _}from"./Download/index.js";import{PageActionsWrapper as $}from"../../common/components/Headers.js";import{Overview as A}from"../../components/Overview/index.js";import{Markdown as E}from"../../markdown/Markdown.js";const H=["title","description"];function T([t,n]){return H.includes(t)?null:Array.isArray(n)?{key:t,value:n.filter(r=>typeof r!="object").join(", ")}:typeof n=="object"?null:{key:t,value:n}}function D(){const{metadata:t,downloadUrls:n,info:r,markdown:f}=L(),{useTranslate:w}=P(),{translate:a}=w(),l=y(()=>Object.entries(t||{}).map(T).filter(M),[t]),s=U(),g=!!(r?.license||r?.contact||r?.termsOfService),u=r?.title||a("graphql.overview","GraphQL Overview"),c=r?.version,d=r?.description;return i(F,{"data-testid":"overview",direction:"row",wrap:"wrap",gap:"64px",children:[i(G,{"data-testid":"overview-item",children:[i($,{children:[i(C,{children:[u,c&&` (${c})`,e(N,{to:s,"aria-label":"link to GraphQL Overview"})]}),e(q,{pageSlug:s})]}),d&&e(E,{rawMarkdown:d,parser:f?.parser}),l.length>0&&i(x,{children:[e(j,{children:a("graphql.metadata","Metadata")}),i("table",{className:"md",children:[e("thead",{children:i("tr",{children:[e("th",{scope:"col",children:a("graphql.key","Key")}),e("th",{scope:"col",children:a("graphql.value","Value")})]})}),e("tbody",{children:l.map(p=>{if(!p)return null;const{key:h,value:b}=p;return i("tr",{children:[e("td",{children:h}),e("td",{children:`${b}`})]},h)})})]})]})]}),i(Q,{children:[e(z,{className:"panel-download",header:a("graphql.download.description.title","Download GraphQL schema"),isExpandable:!1,children:e(_,{downloadUrls:n})}),g&&r&&e(B,{className:"panel-overview",header:a("graphql.info.title","Overview"),isExpandable:!1,children:e(A,{info:r,translate:a})})]})]})}const F=o(I)`
  padding: calc(var(--spacing-vertical) * 1.5) calc(var(--spacing-vertical) * 4);
  padding-bottom: calc(var(--spacing-vertical) * 3.5);

  @media screen and (max-width: ${v.small}) {
    padding-left: var(--spacing-horizontal);
    padding-right: var(--spacing-horizontal);
  }
`,G=o.section`
  word-wrap: break-word;
  width: 100%;

  @media screen and (min-width: ${v.large}) {
    width: calc(100% - var(--panel-samples-width) - 32px);
  }
`,Q=o.div`
  display: flex;
  flex-direction: column;
  flex: 1;
  height: fit-content;
`,z=o(m)`
  height: 100%;
`,B=o(m)`
  height: 100%;
`,C=o(k)`
  position: relative;
  margin: 0;
  margin-bottom: var(--h1-margin-bottom);
  :hover {
    ${S} {
      opacity: 1;
      visibility: visible;
    }
  }
`,ae=O(D);export{ae as Overview};