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

Async API docs for Redocly Realm

import{jsx as e}from"react/jsx-runtime";import s,{css as c}from"styled-components";import{Link as d,useLocation as h}from"react-router-dom";import{LinkIcon as o}from"@redocly/theme";import{tryDecodeURIComponent as v}from"../../utils";function b(i){const n=i.to;return e(d,{"aria-label":i["aria-label"]||`link to ${n}`,id:v(i.id||""),className:i.className||"",to:n,children:i.children})}function f(i){return e(y,Object.assign({},i,{children:e(o,{size:"13px",color:"--heading-anchor-color"})}))}const g=({to:i,className:n})=>{const t=i,a=h(),r=t?.split("#")[1],l=a?a.hash===`#${r}`:!1;return e(m,{ariaLabel:`link to ${t}`,className:n,isActive:l,to:t||"",id:r})},m=s(f)`
  display: flex;
  ${o} {
    visibility: hidden;
    cursor: pointer;
    background-color: var(--bg-color);
  }

  ${({isActive:i})=>i&&c`
      ${o} {
        visibility: visible;
        opacity: 1;
      }
    `}
  :hover ${o}, :focus ${o} {
    visibility: visible;
    opacity: 1;
  }
`,y=s(b)`
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-100%, -50%);
  padding-right: var(--heading-anchor-offset-right);
  z-index: 1;

  ${o} {
    opacity: 0;
    transition:
      visibility 0.3s linear,
      opacity 0.3s linear;
  }

  :hover ${o}, :focus ${o} {
    visibility: visible;
    opacity: 1;
  }
`;export{g as LinkToField,f as ShareLink};