1import React from 'react';
2
3import { InlineCode } from '~/components/base/code';
4import { H2, H3Code } from '~/components/plugins/Headings';
5import { ConstantDefinitionData } from '~/components/plugins/api/APIDataTypes';
6import { CommentTextBlock } from '~/components/plugins/api/APISectionUtils';
7
8export type APISectionConstantsProps = {
9  data: ConstantDefinitionData[];
10  apiName?: string;
11};
12
13const renderConstant = (
14  { name, comment }: ConstantDefinitionData,
15  apiName?: string
16): JSX.Element => (
17  <div key={`constant-definition-${name}`}>
18    <H3Code>
19      <InlineCode>
20        {apiName ? `${apiName}.` : ''}
21        {name}
22      </InlineCode>
23    </H3Code>
24    <CommentTextBlock comment={comment} />
25  </div>
26);
27
28const APISectionConstants: React.FC<APISectionConstantsProps> = ({ data, apiName }) =>
29  data?.length ? (
30    <>
31      <H2 key="constants-header">Constants</H2>
32      {data.map(constant => renderConstant(constant, apiName))}
33    </>
34  ) : null;
35
36export default APISectionConstants;
37