1import GithubSlugger from 'github-slugger';
2import type { PropsWithChildren } from 'react';
3
4import { HeadingManager } from '~/common/headingManager';
5import DocumentationPage from '~/components/DocumentationPage';
6import { HeadingsContext } from '~/components/page-higher-order/withHeadingManager';
7import { PageApiVersionProvider } from '~/providers/page-api-version';
8import { PageMetadataContext } from '~/providers/page-metadata';
9import { PageMetadata, RemarkHeading } from '~/types/common';
10import { AnchorContext } from '~/ui/components/Text';
11
12type DocumentationElementsProps = PropsWithChildren<{
13  meta: PageMetadata;
14  headings: RemarkHeading[];
15}>;
16
17export default function DocumentationElements(props: DocumentationElementsProps) {
18  const slugger = new GithubSlugger();
19  const manager = new HeadingManager(slugger, {
20    ...props.meta,
21    headings: props.headings,
22  });
23
24  return (
25    <AnchorContext.Provider value={slugger}>
26      <HeadingsContext.Provider value={manager}>
27        <PageMetadataContext.Provider value={props.meta}>
28          <PageApiVersionProvider>
29            <DocumentationPage
30              title={props.meta.title || ''}
31              description={props.meta.description || ''}
32              sourceCodeUrl={props.meta.sourceCodeUrl}
33              tocVisible={!props.meta.hideTOC}
34              hideFromSearch={props.meta.hideFromSearch}
35              packageName={props.meta.packageName}
36              iconUrl={props.meta.iconUrl}>
37              {props.children}
38            </DocumentationPage>
39          </PageApiVersionProvider>
40        </PageMetadataContext.Provider>
41      </HeadingsContext.Provider>
42    </AnchorContext.Provider>
43  );
44}
45