diff options
| author | soryu <soryu@soryu.co> | 2026-01-18 17:44:50 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2026-01-18 17:44:50 +0000 |
| commit | 869f21ee2efaefed6a5aa4fbd417c25df8dec02a (patch) | |
| tree | 2a90820ac817173e5b7154e0ba5e4f5d095f9613 /apps/mobile/components/EmptyState.tsx | |
| parent | 219bca168508e1ea5e91e8a9ce98338afeddfbd2 (diff) | |
| download | soryu-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.tsx | 53 |
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, + }, +}); |
