1import { H4 } from '@expo/html-elements';
2import * as React from 'react';
3import { PropsWithChildren } from 'react';
4import { StyleSheet, View, ScrollView } from 'react-native';
5
6const Page = ({ children }: PropsWithChildren<object>) => (
7  <View style={styles.page}>{children}</View>
8);
9
10const ScrollPage = ({ children }: PropsWithChildren<object>) => (
11  <ScrollView style={[styles.page, styles.scrollPage]}>{children}</ScrollView>
12);
13
14type SectionProps = PropsWithChildren<{ title: string; row?: boolean }>;
15
16const Section = ({ title, children, row }: SectionProps) => (
17  <View style={styles.section}>
18    <H4 style={styles.sectionHeader}>{title}</H4>
19    <View style={{ flexDirection: row ? 'row' : 'column' }}>{children}</View>
20  </View>
21);
22
23const styles = StyleSheet.create({
24  page: {
25    paddingHorizontal: 12,
26    paddingBottom: 12,
27  },
28  scrollPage: {
29    flex: 1,
30  },
31  section: {
32    borderBottomColor: 'rgba(0,0,0,0.1)',
33    borderBottomWidth: StyleSheet.hairlineWidth,
34    paddingBottom: 8,
35  },
36  sectionHeader: {
37    marginTop: 8,
38  },
39});
40
41export { Page, ScrollPage, Section };
42