21 lines
579 B
TypeScript
21 lines
579 B
TypeScript
|
import type { FC } from 'react';
|
||
|
|
import React from 'react';
|
||
|
|
import { AnchorLink } from 'dumi/theme';
|
||
|
|
import './SlugList.less';
|
||
|
|
|
||
|
|
const SlugsList: FC<{ slugs: any; className?: string }> = ({ slugs, ...props }) => (
|
||
|
|
<ul role="slug-list" {...props}>
|
||
|
|
{slugs
|
||
|
|
.filter(({ depth }) => depth > 1 && depth < 5)
|
||
|
|
.map(slug => (
|
||
|
|
<li key={slug.heading} title={slug.value} data-depth={slug.depth}>
|
||
|
|
<AnchorLink to={`#${slug.heading}`}>
|
||
|
|
<span>{slug.value}</span>
|
||
|
|
</AnchorLink>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
);
|
||
|
|
|
||
|
|
export default SlugsList;
|