1import type { PropsWithChildren } from 'react';
2
3import { APISectionPlatformTags } from '~/components/plugins/api/APISectionPlatformTags';
4import { Cell, HeaderCell, Row, Table, TableHead } from '~/ui/components/Table';
5import { P, CODE, H3 } from '~/ui/components/Text';
6
7type Props = PropsWithChildren<{
8  properties: PluginProperty[];
9}>;
10
11export const ConfigPluginProperties = ({ children, properties }: Props) => (
12  <>
13    <H3>Configurable properties</H3>
14    {!!children && <P>{children}</P>}
15    <Table>
16      <TableHead>
17        <Row>
18          <HeaderCell>Name</HeaderCell>
19          <HeaderCell>Default</HeaderCell>
20          <HeaderCell>Description</HeaderCell>
21        </Row>
22      </TableHead>
23      <tbody>
24        {properties.map(property => (
25          <Row key={property.name}>
26            <Cell fitContent>
27              <CODE>{property.name}</CODE>
28            </Cell>
29            <Cell>{!property.default ? '-' : <CODE>{property.default}</CODE>}</Cell>
30            <Cell>
31              {!!property.platform && (
32                <APISectionPlatformTags
33                  prefix="Only for:"
34                  platforms={[
35                    { content: [{ kind: 'text', text: property.platform }], tag: 'platform' },
36                  ]}
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