1import { View } from "react-native";
2
3import { cn } from "../../lib/cn";
4import { AppActivityIndicator } from "./AppActivityIndicator";
5import { AppText as Text } from "./AppText";
6import type { ContentBandProps, ContentStatusProps } from "./ContentBand.types";
7export type { ContentBandProps, ContentStatusProps } from "./ContentBand.types";
8
9/** A full-width band above or in place of content, ruled off from what follows. */
10export function ContentBand(props: ContentBandProps) {
11 return (
12 <View
13 className={cn(
14 "border-b px-4",
15 props.spacing === "roomy" ? "gap-3 py-4" : "py-3",
16 props.tone === "warning" ? "border-warning-border bg-warning" : "border-border bg-card",
17 )}
18 >
19 {props.children}
20 </View>
21 );
22}
23
24export function ContentStatus(props: ContentStatusProps) {
25 if (props.loading) {
26 return (
27 <View className="items-center gap-3 border-b border-border bg-card px-4 py-6">
28 <AppActivityIndicator size="small" />
29 <Text className="text-xs text-foreground-muted">{props.detail}</Text>
30 </View>
31 );
32 }
33 return (
34 <View className="border-b border-border bg-card px-4 py-5">
35 {props.title ? (
36 <Text className="text-sm font-t3-bold text-foreground">{props.title}</Text>
37 ) : null}
38 <Text className="text-xs leading-normal text-foreground-muted">{props.detail}</Text>
39 </View>
40 );
41}
42
43/** The scroll content style for a ContentStatus with nothing else in the scroll view. */
44export const contentStatusContainerStyle = undefined;