1 files changed, 53 insertions, 0 deletions
diff --git a/apps/mobile/components/EmptyState.tsx b/apps/mobile/components/EmptyState.tsx
new file mode 100644
index 0000000..0707f91
--- /dev/null
+++ b/apps/mobile/components/EmptyState.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { View, Text, StyleSheet, useColorScheme } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { Colors } from '../constants/Colors';
+
+interface EmptyStateProps {
+  icon?: keyof typeof Ionicons.glyphMap;
+  title: string;
+  message?: string;
+}
+
+export function EmptyState({
+  icon = 'cube-outline',
+  title,
+  message,
+}: EmptyStateProps) {
+  const colorScheme = useColorScheme() ?? 'light';
+  const colors = Colors[colorScheme];
+
+  return (
+    <View style={styles.container}>
+      <Ionicons name={icon} size={64} color={colors.secondaryText} />
+      <Text style={[styles.title, { color: colors.text }]}>{title}</Text>
+      {message && (
+        <Text style={[styles.message, { color: colors.secondaryText }]}>
+          {message}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 32,
+    paddingVertical: 64,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginTop: 16,
+    textAlign: 'center',
+  },
+  message: {
+    fontSize: 14,
+    marginTop: 8,
+    textAlign: 'center',
+    lineHeight: 20,
+  },
+});