@redocly/graphql-docs
Version:
Redocly GraphQL docs
40 lines (37 loc) • 1.84 kB
JavaScript
import{Fragment as d,jsx as e,jsxs as i}from"react/jsx-runtime";import{memo as m,useCallback as p}from"react";import{DownloadButton as f,GraphqlIcon as w,JsonIcon as g,FileIcon as x}from"@redocly/theme";import{transformStringToTelemetryId as b}from"@redocly/openapi-docs/lib/utils/helpers.js";import{styled as t}from"../../../styled-components.js";import{useDownloadInfo as h}from"./useDownloadInfo.js";import{useTelemetry as u}from"../../../hooks/index.js";function y({downloadUrls:a}){const s=u(),r=h({downloadUrls:a}),l=p(o=>{switch(o){case"gql":return e(w,{});case"json":return e(g,{});default:return e(x,{})}},[]);return r?e(k,{children:(r||[]).map(({title:o,url:n,iconType:c})=>i(v,{onClick:()=>{s.sendDownloadDefinitionClickedMessage([{id:b("definition",window.location.hostname,o),object:"definition",uri:new URL(n,window.location.origin).href}])},children:[i(j,{children:[l(c),e("a",{href:n,target:"_blank",download:!0,rel:"noreferrer",children:o})]}),e(f,{data:n})]},o))}):e(d,{})}const q=m(y),v=t.div`
display: flex;
align-items: baseline;
justify-content: space-between;
width: 100%;
border-bottom: 1px solid var(--border-color-secondary);
padding-bottom: var(--spacing-sm);
&:last-of-type {
padding-bottom: 0px;
border-bottom: none;
}
`,j=t.span`
display: flex;
width: calc(100% - 25px);
gap: var(--spacing-xs);
align-items: center;
svg {
flex-shrink: 0;
}
a {
width: 100%;
color: var(--text-color-primary);
word-break: break-word;
text-decoration: none;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
`,k=t.div`
display: flex;
align-items: center;
align-self: flex-start;
justify-content: space-between;
flex-direction: column;
gap: var(--spacing-sm);
font-size: var(--font-size-base);
`;export{q as DownloadSpecification};