1import { css } from '@emotion/react';
2import { StatusWaitingIcon } from '@expo/styleguide-icons';
3
4import { ElementType } from '~/types/common';
5import { NoIcon, YesIcon } from '~/ui/components/DocIcons';
6import { Cell, HeaderCell, Row, Table, TableHead, TableLayout } from '~/ui/components/Table';
7import { A, H4 } from '~/ui/components/Text';
8
9const STYLES_LINK = css`
10  display: grid;
11  grid-template-columns: 20px auto;
12  grid-gap: 8px;
13`;
14
15const platforms = [
16  { title: 'Android Device', propName: 'android' },
17  { title: 'Android Emulator', propName: 'emulator' },
18  { title: 'iOS Device', propName: 'ios' },
19  { title: 'iOS Simulator', propName: 'simulator' },
20  { title: 'Web', propName: 'web' },
21];
22
23type Platform = ElementType<typeof platforms>;
24type IsSupported = boolean | undefined | { pending: string };
25
26function getInfo(isSupported: IsSupported, { title }: Platform) {
27  if (isSupported === true) {
28    return {
29      children: <YesIcon />,
30      title: `${title} is supported`,
31    };
32  } else if (typeof isSupported === 'object') {
33    return {
34      children: (
35        <A css={STYLES_LINK} href={isSupported.pending}>
36          <StatusWaitingIcon className="icon-md text-icon-info" /> Pending
37        </A>
38      ),
39      title: `${title} support is pending`,
40    };
41  }
42
43  return {
44    children: <NoIcon />,
45    title: `${title} is not supported`,
46  };
47}
48
49type Props = {
50  title?: string;
51  ios?: boolean;
52  android?: boolean;
53  web?: boolean;
54  simulator?: boolean;
55  emulator?: boolean;
56};
57
58type PlatformProps = Omit<Props, 'title'>;
59
60const PlatformsSection = (props: Props) => (
61  <>
62    <H4 className="mb-1">{props.title || 'Platform Compatibility'}</H4>
63    <Table layout={TableLayout.Fixed}>
64      <TableHead>
65        <Row>
66          {platforms.map(({ title }) => (
67            <HeaderCell key={title}>{title}</HeaderCell>
68          ))}
69        </Row>
70      </TableHead>
71      <tbody>
72        <Row>
73          {platforms.map(platform => (
74            <Cell
75              key={platform.title}
76              {...getInfo(props[platform.propName as keyof PlatformProps], platform)}
77            />
78          ))}
79        </Row>
80      </tbody>
81    </Table>
82  </>
83);
84
85export default PlatformsSection;
86