68 lines
2.7 KiB
TypeScript
68 lines
2.7 KiB
TypeScript
import "./style.scss"
|
|
|
|
import { styled } from "@linaria/react"
|
|
import { type FC, useState } from "react"
|
|
import { Collapse } from "react-collapse"
|
|
|
|
const StyledTocToggleButton = styled.button`
|
|
cursor: pointer;
|
|
border: none;
|
|
text-align: left;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
`
|
|
|
|
const StyledCollapseContainer = styled.div`
|
|
* {
|
|
transition: height 200ms ease-out;
|
|
}
|
|
`
|
|
|
|
const Toc: FC<{ data?: string }> = (props) => {
|
|
const [isTocOpened, setIsTocOpened] = useState(false)
|
|
|
|
if (!props.data) return <></>
|
|
|
|
return (
|
|
<>
|
|
<StyledTocToggleButton
|
|
className="text-light-text-high-contrast dark:text-dark-text-high-contrast"
|
|
onClick={() => {
|
|
setIsTocOpened((prev) => !prev)
|
|
}}
|
|
>
|
|
<strong className="flex items-center justify-center gap-1 fill-light-text-high-contrast dark:fill-dark-text-high-contrast">
|
|
Table of Contents
|
|
{isTocOpened ? (
|
|
// Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
height="1em"
|
|
viewBox="0 0 320 512"
|
|
>
|
|
<path d="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z" />
|
|
</svg>
|
|
) : (
|
|
// Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
height="1em"
|
|
viewBox="0 0 320 512"
|
|
>
|
|
<path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z" />
|
|
</svg>
|
|
)}
|
|
</strong>
|
|
</StyledTocToggleButton>
|
|
<StyledCollapseContainer>
|
|
<Collapse isOpened={isTocOpened}>
|
|
<div dangerouslySetInnerHTML={{ __html: props.data }} />
|
|
</Collapse>
|
|
</StyledCollapseContainer>
|
|
<hr />
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Toc
|