1
0
mirror of synced 2025-12-22 11:26:57 -05:00
Files
docs/components/article/HeadingLink.tsx
2023-05-09 16:42:10 +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>
)
}