1
0
mirror of synced 2025-12-19 18:10:59 -05:00
Files
docs/src/frame/components/article/HeadingLink.tsx
Kevin Heis 536418954f Move components into src/frame (#45759)
Co-authored-by: Grace Park <gracepark@github.com>
2023-11-13 17:18:51 +00:00

23 lines
568 B
TypeScript

import GithubSlugger from 'github-slugger'
const slugger = new GithubSlugger()
export type PropsT = {
children: string
as: keyof JSX.IntrinsicElements
slug?: string
className?: string
}
export function HeadingLink({ children, as: Component, slug, className }: PropsT) {
slug = slug || slugger.slug(children)
return (
<Component id={slug} className={className} tabIndex={-1}>
<a className="heading-link" href={`#${slug}`}>
{children}
<span aria-hidden="true" className="heading-link-symbol" />
</a>
</Component>
)
}