Function AnchorLink

packages/dev/s2-docs/src/typography.tsx:33–63

({anchorId, isHovered, level, headingText})

}

function AnchorLink({anchorId, isHovered, level, headingText}) {
  let {isFocusVisible, focusProps} = useFocusRing({within: true});
  const href = `#${anchorId}`;
  return (
    <span
      {...focusProps}
      className={style({
        position: 'absolute',
        opacity: {
          default: 0,
          isHovered: 1,
          isFocusVisible: 1
        },
        marginStart: {
          default: 8,
          level: {
            3: 4,
            4: 4
          }
        },
        transition: '[opacity 0.2s ease-in-out]'
      })({isHovered, isFocusVisible, level})}>
      <Link href={href} aria-label={`Link to ${headingText}`}>
        <LinkIcon
          styles={iconStyle({size: 'S', marginBottom: 4})}
          UNSAFE_style={{marginBottom: level === 3 || level === 4 ? 0 : undefined}}
        />
      </Link>
    </span>
  );
}

const h1 = style({
  font: 'heading-3xl',