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 rounded card floating in the content's margin. */
10export function ContentBand(props: ContentBandProps) {
11 return (
12 <View
13 className={cn(
14 "m-2 rounded-[20px] px-4",
15 props.spacing === "roomy" ? "gap-3 py-4" : "py-3",
16 props.tone === "warning" ? "bg-warning" : "bg-card",
17 )}
18 >
19 {props.children}
20 </View>
21 );
22}
23
24/** Material centers an empty state in the space it has. */
25export function ContentStatus(props: ContentStatusProps) {
26 if (props.loading) {
27 return (
28 <View className="items-center gap-3 px-4 py-6">
29 <AppActivityIndicator size="small" />
30 <Text className="text-xs text-foreground-muted">{props.detail}</Text>
31 </View>
32 );
33 }
34 return (
35 <View className="items-center px-6 py-5">
36 {props.title ? (
37 <Text className="text-sm font-t3-bold text-foreground">{props.title}</Text>
38 ) : null}
39 <Text className="mt-2 text-center text-xs leading-normal text-foreground-muted">
40 {props.detail}
41 </Text>
42 </View>
43 );
44}
45
46export const contentStatusContainerStyle = { flexGrow: 1, justifyContent: "center" } as const;