import { Pressable, View } from "react-native"; import { AppText as Text } from "./AppText"; export function EmptyState(props: { readonly title: string; readonly detail: string; readonly actionLabel?: string; readonly onAction?: () => void; readonly variant?: "card" | "plain";}) { if (props.variant === "plain") { return ( <View className="items-center px-8 py-8"> <Text className="text-center text-xl font-t3-bold text-foreground">{props.title}</Text> <Text className="mt-2 text-center font-sans text-base leading-normal text-foreground-muted"> {props.detail} </Text> {props.actionLabel && props.onAction ? ( <Pressable className="mt-5 rounded-full bg-primary px-5 py-3 active:opacity-70" onPress={props.onAction} > <Text className="text-sm font-t3-bold text-primary-foreground"> {props.actionLabel} </Text> </Pressable> ) : null} </View> ); } return ( <View className="rounded-[22px] border border-border bg-card p-5"> <Text className="font-t3-bold text-lg text-foreground">{props.title}</Text> <Text className="mt-2 font-sans text-sm leading-relaxed text-foreground-muted"> {props.detail} </Text> {props.actionLabel && props.onAction ? ( <Pressable className="mt-4 self-start rounded-full bg-primary px-4 py-2.5 active:opacity-70" onPress={props.onAction} > <Text className="text-sm font-t3-bold text-primary-foreground">{props.actionLabel}</Text> </Pressable> ) : null} </View> );}
import { Pressable, View } from "react-native";
import { AppText as Text } from "./AppText";
export function EmptyState(props: {
readonly title: string;
readonly detail: string;
readonly actionLabel?: string;
readonly onAction?: () => void;
readonly variant?: "card" | "plain";
}) {
if (props.variant === "plain") {
return (
<View className="items-center px-8 py-8">
<Text className="text-center text-xl font-t3-bold text-foreground">{props.title}</Text>
<Text className="mt-2 text-center font-sans text-base leading-normal text-foreground-muted">
{props.detail}
</Text>
{props.actionLabel && props.onAction ? (
<Pressable
className="mt-5 rounded-full bg-primary px-5 py-3 active:opacity-70"
onPress={props.onAction}
>
<Text className="text-sm font-t3-bold text-primary-foreground">
{props.actionLabel}
</Text>
</Pressable>
) : null}
</View>
);
}
return (
<View className="rounded-[22px] border border-border bg-card p-5">
<Text className="font-t3-bold text-lg text-foreground">{props.title}</Text>
<Text className="mt-2 font-sans text-sm leading-relaxed text-foreground-muted">
{props.detail}
</Text>
{props.actionLabel && props.onAction ? (
<Pressable
className="mt-4 self-start rounded-full bg-primary px-4 py-2.5 active:opacity-70"
onPress={props.onAction}
>
<Text className="text-sm font-t3-bold text-primary-foreground">{props.actionLabel}</Text>
</Pressable>
) : null}
</View>
);
}