1import React from 'react';
2
3import { InlineCode } from '~/components/base/code';
4import { LI, UL } from '~/components/base/list';
5import { H2, H3Code } from '~/components/plugins/Headings';
6import { InterfaceDefinitionData, InterfaceValueData } from '~/components/plugins/api/APIDataTypes';
7import {
8  CommentTextBlock,
9  inlineRenderers,
10  renderers,
11} from '~/components/plugins/api/APISectionUtils';
12
13export type APISectionInterfacesProps = {
14  data: InterfaceDefinitionData[];
15};
16
17const renderInterface = ({ name, children, comment }: InterfaceDefinitionData): JSX.Element => (
18  <div key={`interface-definition-${name}`}>
19    <H3Code>
20      <InlineCode>{name}</InlineCode>
21    </H3Code>
22    <CommentTextBlock comment={comment} renderers={renderers} />
23    <UL>
24      {children.map((interfaceValue: InterfaceValueData) => (
25        <LI key={interfaceValue.name}>
26          <InlineCode>
27            {name}.{interfaceValue.name}
28            {interfaceValue.type.declaration?.signatures ? '()' : ''}
29          </InlineCode>
30          <CommentTextBlock comment={interfaceValue.comment} renderers={inlineRenderers} withDash />
31        </LI>
32      ))}
33    </UL>
34  </div>
35);
36
37const APISectionInterfaces: React.FC<APISectionInterfacesProps> = ({ data }) =>
38  data?.length ? (
39    <>
40      <H2 key="interfaces-header">Interfaces</H2>
41      {data.map(renderInterface)}
42    </>
43  ) : null;
44
45export default APISectionInterfaces;
46