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

Redocly GraphQL docs

import{jsx as e,jsxs as r,Fragment as m}from"react/jsx-runtime";import{memo as v,useMemo as w}from"react";import{H1 as f,H2 as g,Markdown as u,isNotNull as b,useThemeHooks as x,LinkIcon as y,Panel as j,breakpoints as s}from"@redocly/theme";import{styled as n}from"../../styled-components.js";import{useSettings as k}from"../../settings/index.js";import{Box as O}from"../../common/index.js";import{ShareLink as M,useBaseUrlPath as L}from"../index.js";import{DownloadSpecification as q}from"./Download/index.js";const S=["title","description"];function U([a,t]){return S.includes(a)?null:Array.isArray(t)?{key:a,value:t.filter(o=>typeof o!="object").join(", ")}:typeof t=="object"?null:{key:a,value:t}}function _(){const{metadata:a,downloadUrls:t}=k(),{useTranslate:o}=x(),{translate:i}=o(),l=w(()=>Object.entries(a||{}).map(U).filter(b),[a]),p=L();return r(H,{"data-testid":"overview",direction:"row",wrap:"wrap",gap:"64px",children:[r(N,{"data-testid":"overview-item",children:[r($,{children:[i("graphql.overview","GraphQL Overview"),e(M,{to:p,"aria-label":"link to GraphQL Overview"})]}),e(u,{children:l.length>0&&r(m,{children:[e(g,{children:i("graphql.metadata","Metadata")}),r("table",{className:"md",children:[e("thead",{children:r("tr",{children:[e("th",{scope:"col",children:i("graphql.key","Key")}),e("th",{scope:"col",children:i("graphql.value","Value")})]})}),e("tbody",{children:l.map(d=>{if(!d)return null;const{key:c,value:h}=d;return r("tr",{children:[e("td",{children:c}),e("td",{children:`${h}`})]},c)})})]})]})})]}),e(T,{className:"panel-download",header:i("graphql.download.description.title","Download GraphQL schema"),isExpandable:!1,children:e(q,{downloadUrls:t})})]})}const H=n(O)`
  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: ${s.small}) {
    padding-left: var(--spacing-horizontal);
    padding-right: var(--spacing-horizontal);
  }
`,N=n.section`
  word-wrap: break-word;
  width: 100%;

  @media screen and (min-width: ${s.large}) {
    width: calc(100% - var(--panel-samples-width) - 32px);
  }
`,T=n(j)`
  flex: 1;
`,$=n(f)`
  position: relative;
  margin: 0;
  :hover {
    ${y} {
      opacity: 1;
      visibility: visible;
    }
  }
`,B=v(_);export{B as Overview};