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