recherche

app/components/ui/EmptyState.tsx

@@ -0,0 +1,57 @@
+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>
+  );
+}