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';
6
7type Props = PropsWithChildren<{
8  properties: PluginProperty[];
9}>;
10
11const platformNames: Record<Exclude<PluginProperty['platform'], undefined>, string> = {
12  android: 'Android',
13  ios: 'iOS',
14  web: 'Web',
15};
16
17export const ConfigPluginProperties = ({ children, properties }: Props) => (
18  <>
19    <H3>Configurable properties</H3>
20    {!!children && <P>{children}</P>}
21    <table>
22      <thead>
23        <tr>
24          <th>Name</th>
25          <th>Default</th>
26          <th>Description</th>
27        </tr>
28      </thead>
29      <tbody>
30        {properties.map(property => (
31          <tr key={property.name}>
32            <td>
33              <InlineCode>{property.name}</InlineCode>
34            </td>
35            <td>{!property.default ? '-' : <InlineCode>{property.default}</InlineCode>}</td>
36            <td>
37              {!!property.platform && <B>{platformNames[property.platform]} only </B>}
38              {property.description}
39            </td>
40          </tr>
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