@redocly/asyncapi-docs/lib/components/ChannelLinkItem.js

Async API docs for Redocly Realm

import{jsx as o,jsxs as a}from"react/jsx-runtime";import{useMemo as l}from"react";import{Link as c}from"react-router-dom";import e from"styled-components";import{generateChannelLink as d}from"../utils/index.js";import{ListIcon as m}from"./common/ListIcon.js";import{useTelemetry as k}from"../hooks/index.js";const u=({channel:r,isActive:i})=>{const n=l(()=>d(r),[r]),t=k(),s=()=>{t.sendReferencedInClickedMessage([{id:"asyncapiDocsChannelLink",object:"link",uri:"urn:redocly:redoc:ui:link:asyncapiDocsChannelLink",referencedIn:r.title||r.address||r.key}])};return a(p,{children:[o(m,{size:"22px",color:i?"var(--color-info-border)":"var(--border-color-primary)",style:{marginRight:"var(--spacing-xs)",flexShrink:0}}),o(v,{to:n,onClick:s,children:r.title||r.address||r.key})]})},p=e.div`
  padding: var(--spacing-xxs) var(--spacing-md);
  display: flex;
  align-items: center;
  font-size: var(--font-size-md);
  cursor: pointer;
`,v=e(c)`
  text-decoration: var(--link-decoration);
  color: var(--link-color-primary);
  font-weight: var(--link-font-weight);
  font-size: var(--font-size-base);

  &:visited {
    color: var(--link-color-visited);
    text-decoration: var(--link-decoration-visited);
  }

  &:hover {
    color: var(--link-color-primary-hover);
    text-decoration: var(--link-decoration-hover);
  }
`;export{u as ChannelLinkItem};