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

Async API docs for Redocly Realm

import{jsx as e}from"react/jsx-runtime";import r,{css as c}from"styled-components";import{Link as d,useLocation as h}from"react-router-dom";import{LinkIcon as o}from"@redocly/theme/icons/LinkIcon/LinkIcon";import{tryDecodeURIComponent as f}from"../../utils/index.js";function m(i){const n=i.to;return e(d,{"aria-label":i["aria-label"]||`link to ${n}`,id:f(i.id||""),className:i.className||"",to:n,children:i.children})}function v(i){return e(p,Object.assign({},i,{children:e(o,{color:"--heading-anchor-color",size:"20px"})}))}const g=({to:i,className:n})=>{const t=i,s=h(),a=t?.split("#")[1],l=s?s.hash===`#${a}`:!1;return e(b,{ariaLabel:`link to ${t}`,className:n,isActive:l,to:t||"",id:a})},b=r(v)`
  display: flex;
  height: 24px;
  width: 24px;
  align-items: center;
  justify-content: flex-end;
  ${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;
  }
`,p=r(m)`
  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,v as ShareLink};