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={[{ text: property.platform, tag: 'platform' }]}
35                />
36              )}
37              {property.description}
38            </Cell>
39          </Row>
40        ))}
41      </tbody>
42    </Table>
43  </>
44);
45
46export type PluginProperty = {
47  name: string;
48  description: string;
49  default?: string;
50  platform?: 'android' | 'ios' | 'web';
51};
52