1import { MOBILE_SHAPE } from "../../lib/designTokens";
2import type { ReactNode } from "react";
3import { Platform, View } from "react-native";
4
5import { AppText as Text } from "./AppText";
6
7export function ListSection(props: {
8 readonly title?: string;
9 readonly titleIcon?: ReactNode;
10 readonly trailing?: ReactNode;
11 readonly children: ReactNode;
12 readonly footer?: string;
13}) {
14 return (
15 <View className="gap-2">
16 {props.title ? (
17 <View className="flex-row items-center justify-between gap-3">
18 <View
19 className={
20 Platform.OS === "android"
21 ? "min-w-0 flex-1 flex-row items-center gap-2 px-4"
22 : "min-w-0 flex-1 flex-row items-center gap-2 px-2"
23 }
24 >
25 {props.titleIcon}
26 <Text textRole="footnote" className="shrink font-t3-medium text-foreground-muted">
27 {props.title}
28 </Text>
29 </View>
30 {props.trailing}
31 </View>
32 ) : null}
33 <View
34 className="overflow-hidden border-continuous bg-grouped-card"
35 style={{
36 borderRadius:
37 Platform.OS === "android" ? MOBILE_SHAPE.group.android : MOBILE_SHAPE.group.ios,
38 }}
39 >
40 {props.children}
41 </View>
42 {props.footer ? (
43 <Text textRole="footnote" className="px-4 text-foreground-muted">
44 {props.footer}
45 </Text>
46 ) : null}
47 </View>
48 );
49}