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