1import React, { PropsWithChildren } from 'react';
2
3import { InlineCode } from '~/components/base/code';
4import { B, P } from '~/components/base/paragraph';
5import { H3 } from '~/components/plugins/Headings';
6import { Cell, HeaderCell, Row, Table, TableHead } from '~/ui/components/Table';
7
8type Props = PropsWithChildren<{
9  properties: PluginProperty[];
10}>;
11
12const platformNames: Record<Exclude<PluginProperty['platform'], undefined>, string> = {
13  android: 'Android',
14  ios: 'iOS',
15  web: 'Web',
16};
17
18export const ConfigPluginProperties = ({ children, properties }: Props) => (
19  <>
20    <H3>Configurable properties</H3>
21    {!!children && <P>{children}</P>}
22    <Table>
23      <TableHead>
24        <Row>
25          <HeaderCell>Name</HeaderCell>
26          <HeaderCell>Default</HeaderCell>
27          <HeaderCell>Description</HeaderCell>
28        </Row>
29      </TableHead>
30      <tbody>
31        {properties.map(property => (
32          <Row key={property.name}>
33            <Cell fitContent>
34              <InlineCode>{property.name}</InlineCode>
35            </Cell>
36            <Cell>{!property.default ? '-' : <InlineCode>{property.default}</InlineCode>}</Cell>
37            <Cell>
38              {!!property.platform && <B>{platformNames[property.platform]} only </B>}
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