58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { Link, type Href } from 'expo-router';
|
|
import { Pressable, Text, View } from 'react-native';
|
|
|
|
import { UI } from '@/constants/uiTheme';
|
|
|
|
export type EmptyStateProps = {
|
|
title: string;
|
|
description?: string;
|
|
actionLabel?: string;
|
|
actionHref?: Href;
|
|
onAction?: () => void;
|
|
};
|
|
|
|
export function EmptyState({ title, description, actionLabel, actionHref, onAction }: EmptyStateProps) {
|
|
const actionNode =
|
|
actionLabel && actionHref != null ? (
|
|
<Link href={actionHref} asChild>
|
|
<Pressable
|
|
accessibilityRole="button"
|
|
className="mt-6 min-h-[52px] w-full max-w-sm items-center justify-center rounded-2xl px-5 active:opacity-90"
|
|
style={{ backgroundColor: UI.primary }}
|
|
>
|
|
<Text className="text-center text-lg font-semibold text-white">{actionLabel}</Text>
|
|
</Pressable>
|
|
</Link>
|
|
) : actionLabel && onAction ? (
|
|
<Pressable
|
|
accessibilityRole="button"
|
|
onPress={onAction}
|
|
className="mt-6 min-h-[52px] w-full max-w-sm items-center justify-center rounded-2xl px-5 active:opacity-90"
|
|
style={{ backgroundColor: UI.primary }}
|
|
>
|
|
<Text className="text-center text-lg font-semibold text-white">{actionLabel}</Text>
|
|
</Pressable>
|
|
) : null;
|
|
|
|
return (
|
|
<View className="items-center justify-center px-5 py-10">
|
|
<Text
|
|
className="text-center text-xl font-bold leading-7"
|
|
style={{ color: UI.text }}
|
|
accessibilityRole="header"
|
|
>
|
|
{title}
|
|
</Text>
|
|
{description ? (
|
|
<Text
|
|
className="mt-3 max-w-sm text-center text-base leading-6"
|
|
style={{ color: UI.textMuted }}
|
|
>
|
|
{description}
|
|
</Text>
|
|
) : null}
|
|
{actionNode}
|
|
</View>
|
|
);
|
|
}
|