1import { optionalRequire } from '../../navigation/routeBuilder';
2import ComponentListScreen, { ListElement } from '../ComponentListScreen';
3
4export const ImageScreens = [
5  {
6    name: 'Comparison with original image',
7    route: 'image/comparison',
8    options: {},
9    getComponent() {
10      return optionalRequire(() => require('./ImageComparisonScreen'));
11    },
12  },
13  {
14    name: 'List with thousands images',
15    route: 'image/flashlist',
16    options: {},
17    getComponent() {
18      return optionalRequire(() => require('./ImageFlashListScreen'));
19    },
20  },
21  {
22    name: 'Image formats',
23    route: 'image/formats',
24    getComponent() {
25      return optionalRequire(() => require('./ImageFormatsScreen'));
26    },
27  },
28  {
29    name: 'Resizable image',
30    route: 'image/resizable',
31    getComponent() {
32      return optionalRequire(() => require('./ImageResizableScreen'));
33    },
34  },
35  {
36    name: 'Content fit and position',
37    route: 'image/content-fit',
38    getComponent() {
39      return optionalRequire(() => require('./ImageContentFitScreen'));
40    },
41  },
42  {
43    name: 'Events',
44    route: 'image/events',
45    getComponent() {
46      return optionalRequire(() => require('./ImageEventsScreen'));
47    },
48  },
49];
50
51export default function ImageScreen() {
52  const apis: ListElement[] = ImageScreens.map((screen) => {
53    return {
54      name: screen.name,
55      isAvailable: true,
56      route: `/components/${screen.route}`,
57    };
58  });
59  return <ComponentListScreen apis={apis} sort={false} />;
60}
61