feat: Sprint 5 - Toast, ConfirmDialog, EmptyStates, Settings, Export/Import, Accessibility (TERLOG-52/53/54/55/56/57/58/59)

components/ui/EmptyState.tsx

@@ -0,0 +1,107 @@
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import {
+  Users, MapPin, Map, Calendar, BookOpen, Settings,
+  Inbox, FileText, Bell, Star, Heart, Search,
+  Package, Archive, List, Clipboard, Tag, Shield,
+  type LucideIcon,
+} from 'lucide-react-native';
+
+// Map of icon name strings to actual components
+const ICON_MAP: Record<string, LucideIcon> = {
+  Users,
+  MapPin,
+  Map,
+  Calendar,
+  BookOpen,
+  Settings,
+  Inbox,
+  FileText,
+  Bell,
+  Star,
+  Heart,
+  Search,
+  Package,
+  Archive,
+  List,
+  Clipboard,
+  Tag,
+  Shield,
+};
+
+interface Props {
+  icon?: string;
+  title: string;
+  message?: string;
+  actionLabel?: string;
+  onAction?: () => void;
+}
+
+export function EmptyState({ icon, title, message, actionLabel, onAction }: Props) {
+  const IconComponent = icon ? ICON_MAP[icon] ?? Inbox : Inbox;
+
+  return (
+    <View style={styles.container} accessibilityRole="text" accessibilityLabel={title}>
+      <View style={styles.iconWrap}>
+        <IconComponent size={40} color="#9CA3AF" strokeWidth={1.5} />
+      </View>
+      <Text style={styles.title}>{title}</Text>
+      {message ? <Text style={styles.message}>{message}</Text> : null}
+      {actionLabel && onAction ? (
+        <TouchableOpacity
+          style={styles.button}
+          onPress={onAction}
+          accessibilityRole="button"
+          accessibilityLabel={actionLabel}
+        >
+          <Text style={styles.buttonText}>{actionLabel}</Text>
+        </TouchableOpacity>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 60,
+    paddingHorizontal: 32,
+  },
+  iconWrap: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: '#F3F4F6',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: '600',
+    color: '#374151',
+    textAlign: 'center',
+    marginBottom: 6,
+  },
+  message: {
+    fontSize: 14,
+    color: '#9CA3AF',
+    textAlign: 'center',
+    lineHeight: 20,
+    marginBottom: 20,
+  },
+  button: {
+    backgroundColor: '#1A6B72',
+    paddingVertical: 12,
+    paddingHorizontal: 28,
+    borderRadius: 12,
+    minHeight: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonText: {
+    color: 'white',
+    fontWeight: '600',
+    fontSize: 14,
+  },
+});