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