Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | 1x 1x 1x 1x 1x 1x | import * as React from "react"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faArrowDown } from "@fortawesome/free-solid-svg-icons/faArrowDown"
import { TocHeading } from "../clientUtils/owidTypes"
export const SectionHeading = ({
title,
tocHeadings,
children,
}: {
title: string
tocHeadings: TocHeading[]
children: any
}) => {
const sectionHeadingIdx = tocHeadings.findIndex(
(heading) => !heading.isSubheading && heading.text === title
)
const subHeadings = []
for (let i = sectionHeadingIdx + 1; i < tocHeadings.length; i++) {
if (tocHeadings[i].isSubheading === true) {
subHeadings.push(tocHeadings[i])
} else {
break
}
}
return (
<div className="section-heading">
<div className="wrapper">
{children}
{subHeadings.length !== 0 && (
<>
<div className="in-this-section">
<div className="label">In this section</div>
<div className="border"></div>
</div>
<ul className="subheadings">
{subHeadings.map((subHeading) => (
<li key={subHeading.slug}>
<a href={`#${subHeading.slug}`}>
<FontAwesomeIcon icon={faArrowDown} />
{subHeading.html ? (
<span
dangerouslySetInnerHTML={{
__html: subHeading.html,
}}
></span>
) : (
subHeading.text
)}
</a>
</li>
))}
</ul>
</>
)}
</div>
</div>
)
}
|