94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
import { useRouter } from 'next/router'
|
|
import cx from 'classnames'
|
|
|
|
import { ActionList } from '@primer/components'
|
|
import { Link } from 'components/Link'
|
|
import { BumpLink } from 'components/ui/BumpLink'
|
|
import type { TocItem } from 'components/context/ProductLandingContext'
|
|
|
|
type Props = {
|
|
items: Array<TocItem>
|
|
variant?: 'compact' | 'expanded'
|
|
}
|
|
export const TableOfContents = (props: Props) => {
|
|
const { items, variant = 'expanded' } = props
|
|
const router = useRouter()
|
|
|
|
return (
|
|
<ul
|
|
data-testid="table-of-contents"
|
|
className={cx(variant === 'compact' ? 'list-style-outside pl-2' : 'list-style-none')}
|
|
>
|
|
<ActionList
|
|
items={(items || [])
|
|
.filter((item) => typeof item !== 'undefined')
|
|
.map((item) => {
|
|
const { fullPath: href, title, intro, childTocItems } = item
|
|
const isActive = router.pathname === href
|
|
return variant === 'compact'
|
|
? {
|
|
key: href,
|
|
text: title,
|
|
renderItem: () => (
|
|
<ActionList.Item>
|
|
<li key={href} className="f4 d-list-item width-full list-style-none">
|
|
<Link className="d-block width-full text-underline" href={href}>
|
|
{title}
|
|
</Link>
|
|
{(childTocItems || []).length > 0 && (
|
|
<ul
|
|
className={cx(
|
|
variant === 'compact'
|
|
? 'list-style-circle pl-5 my-3'
|
|
: 'list-style-none'
|
|
)}
|
|
>
|
|
{(childTocItems || []).map((childItem) => {
|
|
if (!childItem) {
|
|
return null
|
|
}
|
|
return (
|
|
<li key={childItem.fullPath} className="f4 d-block width-full m-2">
|
|
<Link
|
|
className="d-block width-full text-underline"
|
|
href={childItem.fullPath}
|
|
>
|
|
{childItem.title}
|
|
</Link>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
)}
|
|
</li>
|
|
</ActionList.Item>
|
|
),
|
|
}
|
|
: {
|
|
key: href,
|
|
title: title,
|
|
renderItem: () => (
|
|
<ActionList.Item className={cx('border-bottom')}>
|
|
<li key={href} className={cx('mt-2', isActive && 'color-fg-muted')}>
|
|
<BumpLink
|
|
as={Link}
|
|
href={href}
|
|
title={<h2 className="py-1 h4">{title}</h2>}
|
|
>
|
|
{intro && (
|
|
<p
|
|
className="f4 color-fg-muted"
|
|
dangerouslySetInnerHTML={{ __html: intro }}
|
|
/>
|
|
)}
|
|
</BumpLink>
|
|
</li>
|
|
</ActionList.Item>
|
|
),
|
|
}
|
|
})}
|
|
/>
|
|
</ul>
|
|
)
|
|
}
|