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