1import { View } from "react-native";
2import type { ReactNode } from "react";
3
4import { AppText as Text } from "./AppText";
5import { Button } from "./Button";
6
7export function EmptyState(props: {
8 readonly title: string;
9 readonly detail: string;
10 readonly actionLabel?: string;
11 readonly onAction?: () => void;
12 readonly action?: ReactNode;
13 readonly variant?: "card" | "plain";
14}) {
15 if (props.variant === "plain") {
16 return (
17 <View className="items-center px-8 py-8">
18 <Text textRole="title" className="text-center font-t3-bold text-foreground">
19 {props.title}
20 </Text>
21 <Text
22 textRole="body"
23 className="mt-2 text-center font-sans leading-normal text-foreground-muted"
24 >
25 {props.detail}
26 </Text>
27 {props.action ? (
28 <View className="mt-5">{props.action}</View>
29 ) : props.actionLabel && props.onAction ? (
30 <View className="mt-5">
31 <Button tone="primary" label={props.actionLabel} onPress={props.onAction} />
32 </View>
33 ) : null}
34 </View>
35 );
36 }
37
38 return (
39 <View className="rounded-[22px] border border-border bg-card p-5">
40 <Text textRole="headline" className="font-t3-bold text-foreground">
41 {props.title}
42 </Text>
43 <Text textRole="footnote" className="mt-2 font-sans leading-relaxed text-foreground-muted">
44 {props.detail}
45 </Text>
46 {props.action ? (
47 <View className="mt-4 self-start">{props.action}</View>
48 ) : props.actionLabel && props.onAction ? (
49 <View className="mt-4 self-start">
50 <Button tone="primary" label={props.actionLabel} onPress={props.onAction} />
51 </View>
52 ) : null}
53 </View>
54 );
55}