jjbrunton/Sauci
1
0 Fork 0
mirror of https://github.com/jjbrunton/Sauci.git synced 2026-10-31 10:19:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
jjbrunton committed 2025-12-27 19:10:11 +00:00
commit 4d53d83769
73 files changed
+37728
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/mobile/app/(app)/index.tsx
Executable
+206
View File
@@ -0,0 +1,206 @@
import { useEffect } from "react";
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
import { useAuthStore, useMatchStore, usePacksStore } from "../../src/store";
import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";
export default function HomeScreen() {
const { user, partner } = useAuthStore();
const { matches, newMatchesCount, fetchMatches } = useMatchStore();
const { packs, fetchPacks } = usePacksStore();
useEffect(() => {
fetchMatches();
fetchPacks();
}, []);
const recentMatches = matches.slice(0, 3);
return (
<ScrollView style={styles.container}>
<View style={styles.header}>
<Text style={styles.greeting}>
Hey, {user?.name || "there"} 👋
</Text>
{partner && (
<Text style={styles.partnerText}>
Paired with {partner.name || partner.email || 'your partner'}
</Text>
)}
</View>
{/* Quick Stats */}
<View style={styles.statsContainer}>
<View style={styles.statCard}>
<Ionicons name="heart" size={24} color="#e94560" />
<Text style={styles.statNumber}>{matches.length}</Text>
<Text style={styles.statLabel}>Matches</Text>
</View>
<View style={styles.statCard}>
<Ionicons name="layers" size={24} color="#e94560" />
<Text style={styles.statNumber}>{packs.length}</Text>
<Text style={styles.statLabel}>Packs</Text>
</View>
<View style={styles.statCard}>
<Ionicons name="sparkles" size={24} color="#e94560" />
<Text style={styles.statNumber}>{newMatchesCount}</Text>
<Text style={styles.statLabel}>New</Text>
</View>
</View>
{/* Start Playing CTA */}
<TouchableOpacity
style={styles.ctaCard}
onPress={() => router.push("/(app)/swipe")}
>
<View style={styles.ctaContent}>
<Text style={styles.ctaTitle}>Ready to explore?</Text>
<Text style={styles.ctaSubtitle}>
Swipe through questions and discover what you both enjoy
</Text>
</View>
<Ionicons name="arrow-forward" size={24} color="#fff" />
</TouchableOpacity>
{/* Recent Matches */}
{recentMatches.length > 0 && (
<View style={styles.section}>
<View style={styles.sectionHeader}>
<Text style={styles.sectionTitle}>Recent Matches</Text>
<TouchableOpacity onPress={() => router.push("/(app)/matches")}>
<Text style={styles.seeAll}>See all</Text>
</TouchableOpacity>
</View>
{recentMatches.map((match) => (
<View key={match.id} style={styles.matchItem}>
<View style={styles.matchIcon}>
<Ionicons name="heart" size={20} color="#e94560" />
</View>
<Text style={styles.matchText} numberOfLines={1}>
{(match as any).question?.text || "A new match!"}
</Text>
{match.is_new && <View style={styles.newBadge} />}
</View>
))}
</View>
)}
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#1a1a2e",
},
header: {
paddingTop: 60,
paddingHorizontal: 24,
paddingBottom: 24,
},
greeting: {
fontSize: 28,
fontWeight: "bold",
color: "#fff",
},
partnerText: {
fontSize: 14,
color: "#888",
marginTop: 4,
},
statsContainer: {
flexDirection: "row",
paddingHorizontal: 24,
gap: 12,
},
statCard: {
flex: 1,
backgroundColor: "#16213e",
borderRadius: 16,
padding: 16,
alignItems: "center",
borderWidth: 1,
borderColor: "#0f3460",
},
statNumber: {
fontSize: 24,
fontWeight: "bold",
color: "#fff",
marginTop: 8,
},
statLabel: {
fontSize: 12,
color: "#888",
marginTop: 4,
},
ctaCard: {
margin: 24,
backgroundColor: "#e94560",
borderRadius: 16,
padding: 20,
flexDirection: "row",
alignItems: "center",
},
ctaContent: {
flex: 1,
},
ctaTitle: {
fontSize: 18,
fontWeight: "bold",
color: "#fff",
},
ctaSubtitle: {
fontSize: 14,
color: "rgba(255,255,255,0.8)",
marginTop: 4,
},
section: {
paddingHorizontal: 24,
marginBottom: 24,
},
sectionHeader: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 16,
},
sectionTitle: {
fontSize: 18,
fontWeight: "600",
color: "#fff",
},
seeAll: {
color: "#e94560",
fontSize: 14,
},
matchItem: {
flexDirection: "row",
alignItems: "center",
backgroundColor: "#16213e",
borderRadius: 12,
padding: 16,
marginBottom: 8,
borderWidth: 1,
borderColor: "#0f3460",
},
matchIcon: {
width: 40,
height: 40,
borderRadius: 20,
backgroundColor: "rgba(233, 69, 96, 0.2)",
justifyContent: "center",
alignItems: "center",
marginRight: 12,
},
matchText: {
flex: 1,
color: "#fff",
fontSize: 14,
},
newBadge: {
width: 8,
height: 8,
borderRadius: 4,
backgroundColor: "#e94560",
},
});