27aa5d92ea
* cleanup FEATURE_NEXTJS * fixing some server tests * updating article a for server tests * update h2 to h4 map topic tests * data off on TOCs * updating dropdown article versions links * Update so markdown renders in intros * updating typo and all server tests are now passing * remove nextjs feature flag * head.js tests pass * updating article-version-picker * remove nextjs feature flag browser test * update header.js tests * fix page-titles.js test * fix deprecated-enterprise versions * adding early access * testing * getting childTocItem * fixing table of contents to show child toc items * updated to 2 because the sidebar article also has the same link * remove comment * updating pick * Update TocLandingContext.tsx * update package.json and change className to h4 for h2 * updating with mikes feedback * remove a.active test * React clean up: Delete unnecessary layouts/includes Part 2 (#20143) * Delete unnecessary layouts * setting back tests failing :( * update layouts * delete unnecessary includes * remove github-ae-release-notes and updating layouts * remove a.active test
63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
import { useRouter } from 'next/router'
|
|
import cx from 'classnames'
|
|
|
|
import { Link } from 'components/Link'
|
|
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 className={cx(variant === 'compact' ? 'list-style-inside pl-2' : 'list-style-none')}>
|
|
{(items || []).map((item) => {
|
|
if (!item) {
|
|
return null
|
|
}
|
|
|
|
const { fullPath: href, title, intro, childTocItems } = item
|
|
const isActive = router.pathname === href
|
|
return variant === 'compact' ? (
|
|
<li key={href} className="f4 my-1">
|
|
<Link href={href}>{title}</Link>
|
|
<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 mt-1">
|
|
<Link
|
|
href={childItem.fullPath}
|
|
className="Bump-link--hover no-underline py-1 color-border-primary"
|
|
>
|
|
{childItem.title}
|
|
</Link>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</li>
|
|
) : (
|
|
<li key={href} className={cx('mb-5', isActive && 'color-auto-gray-4')}>
|
|
<Link
|
|
href={href}
|
|
className="Bump-link--hover no-underline d-block py-1 border-bottom color-border-primary"
|
|
>
|
|
<h2 className="h4">
|
|
{title}
|
|
<span className="Bump-link-symbol">→</span>
|
|
</h2>
|
|
</Link>
|
|
{intro && <p className="f4 mt-3" dangerouslySetInnerHTML={{ __html: intro }} />}
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
)
|
|
}
|