1import React, { PropsWithChildren } from 'react';
2
3import { InlineCode } from '~/components/base/code';
4import { P } from '~/components/base/paragraph';
5import { H3 } from '~/components/plugins/Headings';
6import { APISectionPlatformTags } from '~/components/plugins/api/APISectionPlatformTags';
7import { Cell, HeaderCell, Row, Table, TableHead } from '~/ui/components/Table';
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              <InlineCode>{property.name}</InlineCode>
30            </Cell>
31            <Cell>{!property.default ? '-' : <InlineCode>{property.default}</InlineCode>}</Cell>
32            <Cell>
33              {!!property.platform && (
34                <APISectionPlatformTags
35                  prefix="Only for:"
36                  platforms={[{ text: property.platform, tag: 'platform' }]}
37                />
38              )}
39              {property.description}
40            </Cell>
41          </Row>
42        ))}
43      </tbody>
44    </Table>
45  </>
46);
47
48export type PluginProperty = {
49  name: string;
50  description: string;
51  default?: string;
52  platform?: 'android' | 'ios' | 'web';
53};
54