63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
import { Heading, NavList } from '@primer/react'
|
|
import cx from 'classnames'
|
|
|
|
import type { MiniTocItem } from 'components/context/ArticleContext'
|
|
import { useTranslation } from 'components/hooks/useTranslation'
|
|
|
|
import styles from './Minitocs.module.scss'
|
|
|
|
export type MiniTocsPropsT = {
|
|
miniTocItems: MiniTocItem[]
|
|
}
|
|
|
|
function RenderTocItem(item: MiniTocItem) {
|
|
return (
|
|
<div className={cx(styles.nested, item.platform)}>
|
|
<NavList.Item href={item.contents.href}>{item.contents.title}</NavList.Item>
|
|
{item.items && item.items.length > 0 && (
|
|
<ul className={cx(styles.indentNested)}>
|
|
{item.items.map((toc) => (
|
|
<RenderTocItem
|
|
key={toc.contents.href}
|
|
contents={toc.contents}
|
|
items={toc.items}
|
|
platform={toc.platform}
|
|
/>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function MiniTocs({ miniTocItems }: MiniTocsPropsT) {
|
|
const { t } = useTranslation('pages')
|
|
|
|
return (
|
|
<>
|
|
<Heading
|
|
as="h2"
|
|
id="in-this-article"
|
|
className="mb-1 ml-3"
|
|
sx={{ fontSize: 1 }}
|
|
aria-label={t('miniToc')}
|
|
>
|
|
{t('miniToc')}
|
|
</Heading>
|
|
|
|
<NavList className={cx(styles.miniToc, 'my-2')}>
|
|
{miniTocItems.map((items, i) => {
|
|
return (
|
|
<RenderTocItem
|
|
key={items.contents.href + i}
|
|
contents={items.contents}
|
|
items={items.items}
|
|
platform={items.platform}
|
|
/>
|
|
)
|
|
})}
|
|
</NavList>
|
|
</>
|
|
)
|
|
}
|