1import type { PropsWithChildren } from 'react';
2import ReactMarkdown from 'react-markdown';
3
4import { APISectionPlatformTags } from '~/components/plugins/api/APISectionPlatformTags';
5import { mdComponents } from '~/components/plugins/api/APISectionUtils';
6import { Cell, HeaderCell, Row, Table, TableHead } from '~/ui/components/Table';
7import { P, CODE, H3 } from '~/ui/components/Text';
8
9type Props = PropsWithChildren<{
10  properties: PluginProperty[];
11}>;
12
13export const ConfigPluginProperties = ({ children, properties }: Props) => (
14  <>
15    <H3>Configurable properties</H3>
16    {!!children && <P>{children}</P>}
17    <Table>
18      <TableHead>
19        <Row>
20          <HeaderCell>Name</HeaderCell>
21          <HeaderCell>Default</HeaderCell>
22          <HeaderCell>Description</HeaderCell>
23        </Row>
24      </TableHead>
25      <tbody>
26        {properties.map(property => (
27          <Row key={property.name}>
28            <Cell fitContent>
29              <CODE>{property.name}</CODE>
30            </Cell>
31            <Cell>{!property.default ? '-' : <CODE>{property.default}</CODE>}</Cell>
32            <Cell>
33              {!!property.platform && (
34                <APISectionPlatformTags
35                  prefix="Only for:"
36                  platforms={[
37                    { content: [{ kind: 'text', text: property.platform }], tag: 'platform' },
38                  ]}
39                />
40              )}
41              <ReactMarkdown components={mdComponents}>{property.description}</ReactMarkdown>
42            </Cell>
43          </Row>
44        ))}
45      </tbody>
46    </Table>
47  </>
48);
49
50export type PluginProperty = {
51  name: string;
52  description: string;
53  default?: string;
54  platform?: 'android' | 'ios' | 'web';
55};
56