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