1
0
mirror of synced 2026-01-09 15:02:41 -05:00
Files
docs/components/landing/TableOfContents.tsx
Mike Surowiec 2de358187c Performance testing NextJS / React (#19540)
* Remove json.parse(json.stringify( usage to improve performance
* Fix missing / duplicate keys in some renders
* Fix missing react-is dependency (only seemed to cause problems from pruning on the heroku deploy)
* Add nextjs tag to datadog-connect config when nextjs is a query param
* Fix router.asPath usage to exclude query param
* Fix styling inconsistencies noticed when testing
* Add a few tests
2021-05-27 15:17:27 -07:00

35 lines
1.0 KiB
TypeScript

import { useRouter } from 'next/router'
import Link from 'next/link'
import cx from 'classnames'
import type { TocItem } from '../context/ProductLandingContext'
export const TableOfContents = (props: { items?: Array<TocItem> }) => {
const router = useRouter()
return (
<div>
{(props.items || []).map((obj) => {
if (!obj) {
return null
}
const { fullPath: href, title, intro } = obj
const isActive = router.pathname === href
return (
<div key={href} className={cx('mb-5', isActive && 'color-auto-gray-4')}>
<Link href={href}>
<a className="Bump-link--hover no-underline d-block py-1 border-bottom color-border-primary">
<h4>
{title}
<span className="Bump-link-symbol"></span>
</h4>
</a>
</Link>
{intro && <p className="f4 mt-3" dangerouslySetInnerHTML={{ __html: intro }} />}
</div>
)
})}
</div>
)
}