summaryrefslogtreecommitdiff
path: root/apps/mobile/components/EmptyState.tsx
diff options
context:
space:
mode:
authorsoryu <soryu@soryu.co>2026-01-18 17:44:50 +0000
committerGitHub <noreply@github.com>2026-01-18 17:44:50 +0000
commit869f21ee2efaefed6a5aa4fbd417c25df8dec02a (patch)
tree2a90820ac817173e5b7154e0ba5e4f5d095f9613 /apps/mobile/components/EmptyState.tsx
parent219bca168508e1ea5e91e8a9ce98338afeddfbd2 (diff)
downloadsoryu-869f21ee2efaefed6a5aa4fbd417c25df8dec02a.tar.gz
soryu-869f21ee2efaefed6a5aa4fbd417c25df8dec02a.zip
Add React Native mobile app for Makima (#3)
* [WIP] Heartbeat checkpoint - 2026-01-18 02:58:27 UTC * feat(mobile): complete mobile app integration and verification - Add ThemeColors type export to Colors.ts for type safety - Export SUPABASE_URL from supabase.ts and use environment variables - Update .env.example with correct default URLs - Add comprehensive README.md with setup instructions Verified: - TypeScript compiles without errors - App exports successfully for iOS and Android - All screens accessible (login, dashboard, tasks, settings, task detail) - Auth flow working with Zustand store and Supabase Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Task completion checkpoint --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Diffstat (limited to 'apps/mobile/components/EmptyState.tsx')
-rw-r--r--apps/mobile/components/EmptyState.tsx53
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,
+ },
+});