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 { APISectionDeprecationNote } from '~/components/plugins/api/APISectionDeprecationNote';
8import { APISectionPlatformTags } from '~/components/plugins/api/APISectionPlatformTags';
9import {
10  CommentTextBlock,
11  resolveTypeName,
12  STYLES_APIBOX,
13} from '~/components/plugins/api/APISectionUtils';
14
15export type APISectionConstantsProps = {
16  data: ConstantDefinitionData[];
17  apiName?: string;
18};
19
20const renderConstant = (
21  { name, comment, type }: ConstantDefinitionData,
22  apiName?: string
23): JSX.Element => (
24  <div key={`constant-definition-${name}`} css={STYLES_APIBOX}>
25    <APISectionDeprecationNote comment={comment} />
26    <APISectionPlatformTags comment={comment} prefix="Only for:" firstElement />
27    <H3Code>
28      <InlineCode>
29        {apiName ? `${apiName}.` : ''}
30        {name}
31      </InlineCode>
32    </H3Code>
33    {type && (
34      <P>
35        <B>Type:</B> <InlineCode>{resolveTypeName(type)}</InlineCode>
36      </P>
37    )}
38    <CommentTextBlock comment={comment} includePlatforms={false} />
39  </div>
40);
41
42const APISectionConstants = ({ data, apiName }: APISectionConstantsProps) =>
43  data?.length ? (
44    <>
45      <H2 key="constants-header">Constants</H2>
46      {data.map(constant => renderConstant(constant, apiName))}
47    </>
48  ) : null;
49
50export default APISectionConstants;
51