67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
import { Heading, NavList } from '@primer/react'
|
|
import cx from 'classnames'
|
|
|
|
import { MiniTocItem } from 'components/context/ArticleContext'
|
|
import { Link } from 'components/Link'
|
|
import { useTranslation } from 'components/hooks/useTranslation'
|
|
|
|
import styles from './Minitocs.module.scss'
|
|
|
|
export type MiniTocsPropsT = {
|
|
pageTitle: string
|
|
miniTocItems: MiniTocItem[]
|
|
}
|
|
|
|
function RenderTocItem(item: MiniTocItem) {
|
|
return (
|
|
<div className={cx(styles.nested, item.platform)}>
|
|
<NavList.Item
|
|
href={item.contents.href}
|
|
sx={{
|
|
padding: '4px 0 4px 0',
|
|
marginLeft: '7px',
|
|
}}
|
|
>
|
|
{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({ pageTitle, miniTocItems }: MiniTocsPropsT) {
|
|
const { t } = useTranslation('pages')
|
|
|
|
return (
|
|
<>
|
|
<Heading as="h2" id="in-this-article" className="mb-1 ml-3" sx={{ fontSize: 1 }}>
|
|
<Link href="#in-this-article">{t('miniToc')}</Link>
|
|
</Heading>
|
|
|
|
<NavList className="my-2" key={pageTitle}>
|
|
{miniTocItems.map((items, i) => {
|
|
return (
|
|
<RenderTocItem
|
|
key={items.contents.href + i}
|
|
contents={items.contents}
|
|
items={items.items}
|
|
platform={items.platform}
|
|
/>
|
|
)
|
|
})}
|
|
</NavList>
|
|
</>
|
|
)
|
|
}
|