feat: 5 tab screens wired to centralized data layer
All tabs use shared data, stores, and SwiftUI islands: - Home: greeting from userStore, featured/popular workouts, recent activity from activityStore, tappable collections - Workouts: 50 workouts with SwiftUI Picker category filter, trainer avatars, workout grid, "See All" links to categories - Activity: streak banner, SwiftUI Gauges (workouts/minutes/ calories/best streak), weekly Chart, achievements grid - Browse: featured collection hero, collection grid with emoji icons, programs carousel, new releases list - Profile: user card, subscription banner, SwiftUI List with workout/notification settings (Switches persist via Zustand) Tab layout uses NativeTabs with SF Symbols and haptic feedback. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Millian Lamiaux
32
app/(tabs)/CLAUDE.md
Normal file
32
app/(tabs)/CLAUDE.md
Normal file
@@ -0,0 +1,32 @@
|
||||
<claude-mem-context>
|
||||
# Recent Activity
|
||||
|
||||
<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
|
||||
|
||||
### Feb 20, 2026
|
||||
|
||||
| ID | Time | T | Title | Read |
|
||||
|----|------|---|-------|------|
|
||||
| #5056 | 8:24 AM | ✅ | Completed Host wrapper restoration in home screen | ~258 |
|
||||
| #5055 | " | ✅ | Re-added Host wrapper to home screen JSX | ~187 |
|
||||
| #5054 | " | ✅ | Re-added Host import to home screen | ~184 |
|
||||
| #5043 | 8:22 AM | ✅ | Removed closing Host tag from profile screen | ~210 |
|
||||
| #5042 | " | ✅ | Removed opening Host tag from profile screen | ~164 |
|
||||
| #5041 | " | ✅ | Removed closing Host tag from browse screen | ~187 |
|
||||
| #5040 | " | ✅ | Removed opening Host tag from browse screen | ~159 |
|
||||
| #5039 | 8:21 AM | ✅ | Removed closing Host tag from activity screen | ~193 |
|
||||
| #5038 | " | ✅ | Removed opening Host tag from activity screen | ~154 |
|
||||
| #5037 | " | ✅ | Removed closing Host tag from workouts screen | ~195 |
|
||||
| #5036 | " | ✅ | Removed opening Host tag from workouts screen | ~164 |
|
||||
| #5035 | " | ✅ | Removed closing Host tag from home screen JSX | ~197 |
|
||||
| #5034 | " | ✅ | Removed Host wrapper from home screen JSX | ~139 |
|
||||
| #5031 | 8:19 AM | ✅ | Removed Host import from profile screen | ~184 |
|
||||
| #5030 | " | ✅ | Removed Host import from browse screen | ~190 |
|
||||
| #5029 | 8:18 AM | ✅ | Removed Host import from activity screen | ~183 |
|
||||
| #5028 | " | ✅ | Removed Host import from workouts screen | ~189 |
|
||||
| #5027 | " | ✅ | Removed Host import from home screen index.tsx | ~180 |
|
||||
| #5024 | " | 🔵 | Activity screen properly wraps content with Host component | ~237 |
|
||||
| #5023 | " | 🔵 | Profile screen properly wraps content with Host component | ~246 |
|
||||
| #5022 | 8:14 AM | 🔵 | Browse screen properly wraps content with Host component | ~217 |
|
||||
| #5021 | " | 🔵 | Workouts screen properly wraps content with Host component | ~228 |
|
||||
</claude-mem-context>
|
||||
@@ -1,41 +1,41 @@
|
||||
import { Tabs } from 'expo-router'
|
||||
import Ionicons from '@expo/vector-icons/Ionicons'
|
||||
/**
|
||||
* TabataFit Tab Layout
|
||||
* Native iOS tabs with liquid glass effect
|
||||
* 5 tabs: Home, Workouts, Activity, Browse, Profile
|
||||
*/
|
||||
|
||||
import { HapticTab } from '@/components/haptic-tab'
|
||||
import { BRAND, SURFACE, TEXT, BORDER } from '@/src/shared/constants/colors'
|
||||
import { NativeTabs, Icon, Label } from 'expo-router/unstable-native-tabs'
|
||||
import { BRAND } from '@/src/shared/constants/colors'
|
||||
|
||||
export default function TabLayout() {
|
||||
return (
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
tabBarButton: HapticTab,
|
||||
tabBarActiveTintColor: BRAND.PRIMARY,
|
||||
tabBarInactiveTintColor: TEXT.HINT,
|
||||
tabBarStyle: {
|
||||
backgroundColor: SURFACE.BASE,
|
||||
borderTopColor: BORDER.SUBTLE,
|
||||
},
|
||||
}}
|
||||
<NativeTabs
|
||||
tintColor={BRAND.PRIMARY}
|
||||
>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: 'Accueil',
|
||||
tabBarIcon: ({ color, size }) => (
|
||||
<Ionicons name="flame" size={size} color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="explore"
|
||||
options={{
|
||||
title: 'Explorer',
|
||||
tabBarIcon: ({ color, size }) => (
|
||||
<Ionicons name="compass" size={size} color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
<NativeTabs.Trigger name="index">
|
||||
<Icon sf={{ default: 'house', selected: 'house.fill' }} />
|
||||
<Label>Home</Label>
|
||||
</NativeTabs.Trigger>
|
||||
|
||||
<NativeTabs.Trigger name="workouts">
|
||||
<Icon sf={{ default: 'flame', selected: 'flame.fill' }} />
|
||||
<Label>Workouts</Label>
|
||||
</NativeTabs.Trigger>
|
||||
|
||||
<NativeTabs.Trigger name="activity">
|
||||
<Icon sf={{ default: 'chart.bar', selected: 'chart.bar.fill' }} />
|
||||
<Label>Activity</Label>
|
||||
</NativeTabs.Trigger>
|
||||
|
||||
<NativeTabs.Trigger name="browse">
|
||||
<Icon sf={{ default: 'square.grid.2x2', selected: 'square.grid.2x2.fill' }} />
|
||||
<Label>Browse</Label>
|
||||
</NativeTabs.Trigger>
|
||||
|
||||
<NativeTabs.Trigger name="profile">
|
||||
<Icon sf={{ default: 'person', selected: 'person.fill' }} />
|
||||
<Label>Profile</Label>
|
||||
</NativeTabs.Trigger>
|
||||
</NativeTabs>
|
||||
)
|
||||
}
|
||||
|
||||
306
app/(tabs)/activity.tsx
Normal file
306
app/(tabs)/activity.tsx
Normal file
@@ -0,0 +1,306 @@
|
||||
/**
|
||||
* TabataFit Activity Screen
|
||||
* React Native + SwiftUI Islands — wired to shared data
|
||||
*/
|
||||
|
||||
import { View, StyleSheet, ScrollView, Dimensions, Text as RNText } from 'react-native'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { LinearGradient } from 'expo-linear-gradient'
|
||||
import { BlurView } from 'expo-blur'
|
||||
import Ionicons from '@expo/vector-icons/Ionicons'
|
||||
import {
|
||||
Host,
|
||||
Gauge,
|
||||
Text,
|
||||
HStack,
|
||||
VStack,
|
||||
Chart,
|
||||
List,
|
||||
} from '@expo/ui/swift-ui'
|
||||
|
||||
import { useMemo } from 'react'
|
||||
import { useActivityStore, getWeeklyActivity } from '@/src/shared/stores'
|
||||
import { getWorkoutById } from '@/src/shared/data'
|
||||
import { ACHIEVEMENTS } from '@/src/shared/data'
|
||||
import { StyledText } from '@/src/shared/components/StyledText'
|
||||
|
||||
import {
|
||||
BRAND,
|
||||
DARK,
|
||||
TEXT as TEXT_COLORS,
|
||||
GLASS,
|
||||
GRADIENTS,
|
||||
} from '@/src/shared/constants/colors'
|
||||
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
|
||||
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
||||
|
||||
const { width: SCREEN_WIDTH } = Dimensions.get('window')
|
||||
|
||||
const FONTS = {
|
||||
LARGE_TITLE: 34,
|
||||
TITLE_2: 22,
|
||||
SUBHEADLINE: 15,
|
||||
CAPTION_1: 12,
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// MAIN SCREEN
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
export default function ActivityScreen() {
|
||||
const insets = useSafeAreaInsets()
|
||||
const streak = useActivityStore((s) => s.streak)
|
||||
const history = useActivityStore((s) => s.history)
|
||||
const totalWorkouts = history.length
|
||||
const totalMinutes = useMemo(() => history.reduce((sum, r) => sum + r.durationMinutes, 0), [history])
|
||||
const totalCalories = useMemo(() => history.reduce((sum, r) => sum + r.calories, 0), [history])
|
||||
const recentWorkouts = useMemo(() => history.slice(0, 3), [history])
|
||||
const weeklyActivity = useMemo(() => getWeeklyActivity(history), [history])
|
||||
|
||||
// Check achievements
|
||||
const unlockedAchievements = ACHIEVEMENTS.filter(a => {
|
||||
switch (a.type) {
|
||||
case 'workouts': return totalWorkouts >= a.requirement
|
||||
case 'streak': return streak.longest >= a.requirement
|
||||
case 'minutes': return totalMinutes >= a.requirement
|
||||
case 'calories': return totalCalories >= a.requirement
|
||||
default: return false
|
||||
}
|
||||
})
|
||||
const displayAchievements = ACHIEVEMENTS.slice(0, 5).map(a => ({
|
||||
...a,
|
||||
unlocked: unlockedAchievements.some(u => u.id === a.id),
|
||||
}))
|
||||
|
||||
// Format recent workout dates
|
||||
const formatDate = (timestamp: number) => {
|
||||
const now = Date.now()
|
||||
const diff = now - timestamp
|
||||
if (diff < 86400000) return 'Today'
|
||||
if (diff < 172800000) return 'Yesterday'
|
||||
return Math.floor(diff / 86400000) + ' days ago'
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Header */}
|
||||
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT_COLORS.PRIMARY}>Activity</StyledText>
|
||||
|
||||
{/* Streak Banner */}
|
||||
<View style={styles.streakBanner}>
|
||||
<LinearGradient
|
||||
colors={GRADIENTS.CTA}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
<View style={styles.streakContent}>
|
||||
<Ionicons name="flame" size={32} color={TEXT_COLORS.PRIMARY} />
|
||||
<View style={styles.streakText}>
|
||||
<StyledText size={FONTS.TITLE_2} weight="bold" color={TEXT_COLORS.PRIMARY}>
|
||||
{(streak.current || 0) + ' Day Streak'}
|
||||
</StyledText>
|
||||
<StyledText size={FONTS.SUBHEADLINE} color={TEXT_COLORS.SECONDARY}>
|
||||
{streak.current > 0 ? 'Keep it going!' : 'Start your streak today!'}
|
||||
</StyledText>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* SwiftUI Island: Stats Gauges */}
|
||||
<Host matchContents useViewportSizeMeasurement colorScheme="dark" style={styles.statsIsland}>
|
||||
<HStack spacing={12}>
|
||||
<VStack spacing={4}>
|
||||
<Gauge
|
||||
type="circularCapacity"
|
||||
current={{ value: Math.min(totalWorkouts / 100, 1), label: String(totalWorkouts) }}
|
||||
color={BRAND.PRIMARY}
|
||||
/>
|
||||
<Text size={11} color={TEXT_COLORS.TERTIARY}>Workouts</Text>
|
||||
</VStack>
|
||||
<VStack spacing={4}>
|
||||
<Gauge
|
||||
type="circularCapacity"
|
||||
current={{ value: Math.min(totalMinutes / 300, 1), label: String(totalMinutes) }}
|
||||
color="#5AC8FA"
|
||||
/>
|
||||
<Text size={11} color={TEXT_COLORS.TERTIARY}>Minutes</Text>
|
||||
</VStack>
|
||||
<VStack spacing={4}>
|
||||
<Gauge
|
||||
type="circularCapacity"
|
||||
current={{ value: Math.min(totalCalories / 5000, 1), label: String(totalCalories) }}
|
||||
color="#FFD60A"
|
||||
/>
|
||||
<Text size={11} color={TEXT_COLORS.TERTIARY}>Calories</Text>
|
||||
</VStack>
|
||||
<VStack spacing={4}>
|
||||
<Gauge
|
||||
type="circularCapacity"
|
||||
current={{ value: Math.min(streak.longest / 30, 1), label: String(streak.longest) }}
|
||||
color="#30D158"
|
||||
/>
|
||||
<Text size={11} color={TEXT_COLORS.TERTIARY}>Best Streak</Text>
|
||||
</VStack>
|
||||
</HStack>
|
||||
</Host>
|
||||
|
||||
{/* SwiftUI Island: This Week Chart */}
|
||||
<View style={styles.section}>
|
||||
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT_COLORS.PRIMARY}>This Week</StyledText>
|
||||
<Host matchContents useViewportSizeMeasurement colorScheme="dark" style={styles.chartIsland}>
|
||||
<Chart
|
||||
type="bar"
|
||||
data={weeklyActivity.map(d => ({
|
||||
x: d.date,
|
||||
y: d.completed ? 1 : 0,
|
||||
color: d.completed ? BRAND.PRIMARY : '#333333',
|
||||
}))}
|
||||
barStyle={{ cornerRadius: 4 }}
|
||||
style={{ height: 160 }}
|
||||
/>
|
||||
</Host>
|
||||
</View>
|
||||
|
||||
{/* SwiftUI Island: Recent Workouts */}
|
||||
{recentWorkouts.length > 0 && (
|
||||
<View style={styles.section}>
|
||||
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT_COLORS.PRIMARY}>Recent</StyledText>
|
||||
<Host useViewportSizeMeasurement colorScheme="dark" style={{ height: 44 * recentWorkouts.length + 55 }}>
|
||||
<List listStyle="insetGrouped" scrollEnabled={false}>
|
||||
{recentWorkouts.map((result) => {
|
||||
const workout = getWorkoutById(result.workoutId)
|
||||
return (
|
||||
<HStack key={result.id} spacing={12}>
|
||||
<Text color={BRAND.PRIMARY} weight="bold">{workout?.title ?? 'Workout'}</Text>
|
||||
<Text size={13} color={TEXT_COLORS.TERTIARY}>{formatDate(result.completedAt)}</Text>
|
||||
<Text size={13} color={TEXT_COLORS.PRIMARY}>{result.durationMinutes + ' min'}</Text>
|
||||
<Text size={13} color={BRAND.PRIMARY}>{result.calories + ' cal'}</Text>
|
||||
</HStack>
|
||||
)
|
||||
})}
|
||||
</List>
|
||||
</Host>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Achievements */}
|
||||
<View style={styles.section}>
|
||||
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT_COLORS.PRIMARY}>Achievements</StyledText>
|
||||
<View style={styles.achievementsGrid}>
|
||||
{displayAchievements.map((achievement) => (
|
||||
<View
|
||||
key={achievement.id}
|
||||
style={[styles.achievementBadge, !achievement.unlocked && styles.achievementLocked]}
|
||||
>
|
||||
<BlurView intensity={GLASS.BLUR_LIGHT} tint="dark" style={StyleSheet.absoluteFill} />
|
||||
<View style={[styles.achievementIcon, !achievement.unlocked && styles.achievementIconLocked]}>
|
||||
<Ionicons
|
||||
name={achievement.unlocked ? 'trophy' : 'lock-closed'}
|
||||
size={24}
|
||||
color={achievement.unlocked ? BRAND.PRIMARY : TEXT_COLORS.TERTIARY}
|
||||
/>
|
||||
</View>
|
||||
<StyledText
|
||||
size={FONTS.CAPTION_1}
|
||||
weight={achievement.unlocked ? 'semibold' : 'regular'}
|
||||
color={TEXT_COLORS.PRIMARY}
|
||||
>
|
||||
{achievement.title}
|
||||
</StyledText>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// STYLES
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: DARK.BASE,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
},
|
||||
|
||||
// Streak Banner
|
||||
streakBanner: {
|
||||
height: 80,
|
||||
borderRadius: RADIUS.GLASS_CARD,
|
||||
overflow: 'hidden',
|
||||
marginBottom: SPACING[6],
|
||||
marginTop: SPACING[4],
|
||||
},
|
||||
streakContent: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: SPACING[5],
|
||||
gap: SPACING[4],
|
||||
},
|
||||
streakText: {
|
||||
flex: 1,
|
||||
},
|
||||
|
||||
// Stats Island
|
||||
statsIsland: {
|
||||
marginBottom: SPACING[8],
|
||||
},
|
||||
|
||||
// Chart Island
|
||||
chartIsland: {
|
||||
marginTop: SPACING[2],
|
||||
},
|
||||
|
||||
// Section
|
||||
section: {
|
||||
marginBottom: SPACING[6],
|
||||
},
|
||||
|
||||
// Achievements
|
||||
achievementsGrid: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: SPACING[3],
|
||||
},
|
||||
achievementBadge: {
|
||||
width: (SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2 - SPACING[3] * 2) / 3,
|
||||
aspectRatio: 1,
|
||||
borderRadius: RADIUS.LG,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
achievementLocked: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
achievementIcon: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 24,
|
||||
backgroundColor: 'rgba(255, 107, 53, 0.15)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: SPACING[2],
|
||||
},
|
||||
achievementIconLocked: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
||||
},
|
||||
})
|
||||
379
app/(tabs)/browse.tsx
Normal file
379
app/(tabs)/browse.tsx
Normal file
@@ -0,0 +1,379 @@
|
||||
/**
|
||||
* TabataFit Browse Screen
|
||||
* React Native UI — wired to shared data
|
||||
*/
|
||||
|
||||
import { View, StyleSheet, ScrollView, Pressable, Dimensions, Text as RNText } from 'react-native'
|
||||
import { useRouter } from 'expo-router'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { LinearGradient } from 'expo-linear-gradient'
|
||||
import { BlurView } from 'expo-blur'
|
||||
import Ionicons from '@expo/vector-icons/Ionicons'
|
||||
|
||||
import { useHaptics } from '@/src/shared/hooks'
|
||||
import {
|
||||
COLLECTIONS,
|
||||
PROGRAMS,
|
||||
getFeaturedCollection,
|
||||
COLLECTION_COLORS,
|
||||
WORKOUTS,
|
||||
getTrainerById,
|
||||
} from '@/src/shared/data'
|
||||
import { StyledText } from '@/src/shared/components/StyledText'
|
||||
|
||||
import {
|
||||
BRAND,
|
||||
DARK,
|
||||
TEXT,
|
||||
GLASS,
|
||||
SHADOW,
|
||||
} from '@/src/shared/constants/colors'
|
||||
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
|
||||
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
||||
|
||||
const { width: SCREEN_WIDTH } = Dimensions.get('window')
|
||||
|
||||
const FONTS = {
|
||||
LARGE_TITLE: 34,
|
||||
TITLE: 28,
|
||||
TITLE_2: 22,
|
||||
HEADLINE: 17,
|
||||
SUBHEADLINE: 15,
|
||||
CAPTION_1: 12,
|
||||
CAPTION_2: 11,
|
||||
}
|
||||
|
||||
function TextButton({ children, onPress }: { children: string; onPress?: () => void }) {
|
||||
return (
|
||||
<Pressable onPress={onPress} hitSlop={8}>
|
||||
<StyledText size={FONTS.SUBHEADLINE} color={BRAND.PRIMARY} weight="medium">
|
||||
{children}
|
||||
</StyledText>
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
|
||||
// New Releases: last 4 workouts
|
||||
const NEW_RELEASES = WORKOUTS.slice(-4)
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// MAIN SCREEN
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
export default function BrowseScreen() {
|
||||
const insets = useSafeAreaInsets()
|
||||
const router = useRouter()
|
||||
const haptics = useHaptics()
|
||||
|
||||
const featuredCollection = getFeaturedCollection()
|
||||
|
||||
const handleWorkoutPress = (id: string) => {
|
||||
haptics.buttonTap()
|
||||
router.push(`/workout/${id}`)
|
||||
}
|
||||
|
||||
const handleCollectionPress = (id: string) => {
|
||||
haptics.buttonTap()
|
||||
router.push(`/collection/${id}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Header */}
|
||||
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT.PRIMARY}>Browse</StyledText>
|
||||
|
||||
{/* Featured Collection */}
|
||||
{featuredCollection && (
|
||||
<Pressable style={styles.featuredCard} onPress={() => handleCollectionPress(featuredCollection.id)}>
|
||||
<LinearGradient
|
||||
colors={featuredCollection.gradient ?? [BRAND.PRIMARY, '#FF3B30']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
|
||||
<View style={styles.featuredBadge}>
|
||||
<Ionicons name="star" size={12} color={TEXT.PRIMARY} />
|
||||
<RNText style={styles.featuredBadgeText}>FEATURED</RNText>
|
||||
</View>
|
||||
|
||||
<View style={styles.featuredInfo}>
|
||||
<StyledText size={FONTS.TITLE} weight="bold" color={TEXT.PRIMARY}>{featuredCollection.title}</StyledText>
|
||||
<StyledText size={FONTS.HEADLINE} color={TEXT.SECONDARY}>{featuredCollection.description}</StyledText>
|
||||
|
||||
<View style={styles.featuredStats}>
|
||||
<View style={styles.featuredStat}>
|
||||
<Ionicons name="fitness" size={14} color={TEXT.PRIMARY} />
|
||||
<StyledText size={FONTS.CAPTION_1} color={TEXT.PRIMARY}>{featuredCollection.workoutIds.length + ' workouts'}</StyledText>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Pressable>
|
||||
)}
|
||||
|
||||
{/* Collections Grid */}
|
||||
<View style={styles.section}>
|
||||
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>Collections</StyledText>
|
||||
<View style={styles.collectionsGrid}>
|
||||
{COLLECTIONS.map((collection) => {
|
||||
const color = COLLECTION_COLORS[collection.id] ?? BRAND.PRIMARY
|
||||
return (
|
||||
<Pressable
|
||||
key={collection.id}
|
||||
style={styles.collectionCard}
|
||||
onPress={() => handleCollectionPress(collection.id)}
|
||||
>
|
||||
<BlurView intensity={GLASS.BLUR_LIGHT} tint="dark" style={StyleSheet.absoluteFill} />
|
||||
<View style={[styles.collectionIconBg, { backgroundColor: `${color}20` }]}>
|
||||
<RNText style={styles.collectionEmoji}>{collection.icon}</RNText>
|
||||
</View>
|
||||
<StyledText size={FONTS.SUBHEADLINE} weight="semibold" color={TEXT.PRIMARY} numberOfLines={1}>
|
||||
{collection.title}
|
||||
</StyledText>
|
||||
<StyledText size={FONTS.CAPTION_1} color={color}>
|
||||
{collection.workoutIds.length + ' workouts'}
|
||||
</StyledText>
|
||||
</Pressable>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Programs */}
|
||||
<View style={styles.section}>
|
||||
<View style={styles.sectionHeader}>
|
||||
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>Programs</StyledText>
|
||||
<TextButton>See All</TextButton>
|
||||
</View>
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={styles.programsScroll}
|
||||
>
|
||||
{PROGRAMS.map((program) => (
|
||||
<View key={program.id} style={styles.programCard}>
|
||||
<BlurView intensity={GLASS.BLUR_MEDIUM} tint="dark" style={StyleSheet.absoluteFill} />
|
||||
|
||||
<View style={styles.programHeader}>
|
||||
<View style={styles.programLevelBadge}>
|
||||
<StyledText size={FONTS.CAPTION_2} weight="semibold" color={TEXT.PRIMARY}>{program.level}</StyledText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<StyledText size={FONTS.HEADLINE} weight="semibold" color={TEXT.PRIMARY}>{program.title}</StyledText>
|
||||
|
||||
<View style={styles.programMeta}>
|
||||
<View style={styles.programMetaItem}>
|
||||
<Ionicons name="calendar" size={14} color={TEXT.TERTIARY} />
|
||||
<StyledText size={FONTS.CAPTION_1} color={TEXT.TERTIARY}>{program.weeks + ' weeks'}</StyledText>
|
||||
</View>
|
||||
<View style={styles.programMetaItem}>
|
||||
<Ionicons name="repeat" size={14} color={TEXT.TERTIARY} />
|
||||
<StyledText size={FONTS.CAPTION_1} color={TEXT.TERTIARY}>{program.workoutsPerWeek + 'x /week'}</StyledText>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
{/* New Releases */}
|
||||
<View style={styles.section}>
|
||||
<View style={styles.sectionHeader}>
|
||||
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>New Releases</StyledText>
|
||||
</View>
|
||||
{NEW_RELEASES.map((workout) => {
|
||||
const trainer = getTrainerById(workout.trainerId)
|
||||
return (
|
||||
<Pressable
|
||||
key={workout.id}
|
||||
style={styles.releaseRow}
|
||||
onPress={() => handleWorkoutPress(workout.id)}
|
||||
>
|
||||
<View style={[styles.releaseAvatar, { backgroundColor: trainer?.color ?? BRAND.PRIMARY }]}>
|
||||
<RNText style={styles.releaseInitial}>{trainer?.name[0] ?? 'T'}</RNText>
|
||||
</View>
|
||||
<View style={styles.releaseInfo}>
|
||||
<StyledText size={FONTS.HEADLINE} weight="semibold" color={TEXT.PRIMARY}>{workout.title}</StyledText>
|
||||
<StyledText size={FONTS.CAPTION_1} color={TEXT.TERTIARY}>
|
||||
{(trainer?.name ?? '') + ' \u00B7 ' + workout.duration + ' min \u00B7 ' + workout.level}
|
||||
</StyledText>
|
||||
</View>
|
||||
<Ionicons name="play-circle" size={32} color={BRAND.PRIMARY} />
|
||||
</Pressable>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// STYLES
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
const COLLECTION_CARD_WIDTH = (SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2 - SPACING[3]) / 2
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: DARK.BASE,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
},
|
||||
|
||||
// Featured Collection
|
||||
featuredCard: {
|
||||
height: 200,
|
||||
borderRadius: RADIUS.GLASS_CARD,
|
||||
overflow: 'hidden',
|
||||
marginBottom: SPACING[8],
|
||||
marginTop: SPACING[4],
|
||||
...SHADOW.lg,
|
||||
},
|
||||
featuredBadge: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
paddingHorizontal: SPACING[2],
|
||||
paddingVertical: SPACING[1],
|
||||
borderRadius: RADIUS.SM,
|
||||
alignSelf: 'flex-start',
|
||||
margin: SPACING[4],
|
||||
gap: SPACING[1],
|
||||
},
|
||||
featuredBadgeText: {
|
||||
fontSize: 11,
|
||||
fontWeight: 'bold',
|
||||
color: TEXT.PRIMARY,
|
||||
},
|
||||
featuredInfo: {
|
||||
position: 'absolute',
|
||||
bottom: SPACING[5],
|
||||
left: SPACING[5],
|
||||
right: SPACING[5],
|
||||
},
|
||||
featuredStats: {
|
||||
flexDirection: 'row',
|
||||
gap: SPACING[4],
|
||||
marginTop: SPACING[3],
|
||||
},
|
||||
featuredStat: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: SPACING[1],
|
||||
},
|
||||
|
||||
// Section
|
||||
section: {
|
||||
marginBottom: SPACING[6],
|
||||
},
|
||||
sectionHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: SPACING[4],
|
||||
},
|
||||
|
||||
// Collections Grid
|
||||
collectionsGrid: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: SPACING[3],
|
||||
marginTop: SPACING[3],
|
||||
},
|
||||
collectionCard: {
|
||||
width: COLLECTION_CARD_WIDTH,
|
||||
paddingVertical: SPACING[4],
|
||||
paddingHorizontal: SPACING[3],
|
||||
borderRadius: RADIUS.LG,
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
gap: SPACING[1],
|
||||
},
|
||||
collectionIconBg: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: SPACING[2],
|
||||
},
|
||||
collectionEmoji: {
|
||||
fontSize: 22,
|
||||
},
|
||||
|
||||
// Programs
|
||||
programsScroll: {
|
||||
gap: SPACING[3],
|
||||
},
|
||||
programCard: {
|
||||
width: 200,
|
||||
height: 140,
|
||||
borderRadius: RADIUS.LG,
|
||||
overflow: 'hidden',
|
||||
padding: SPACING[4],
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
},
|
||||
programHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end',
|
||||
marginBottom: SPACING[2],
|
||||
},
|
||||
programLevelBadge: {
|
||||
backgroundColor: 'rgba(255, 107, 53, 0.2)',
|
||||
paddingHorizontal: SPACING[2],
|
||||
paddingVertical: SPACING[1],
|
||||
borderRadius: RADIUS.SM,
|
||||
},
|
||||
programMeta: {
|
||||
flexDirection: 'row',
|
||||
gap: SPACING[3],
|
||||
marginTop: SPACING[3],
|
||||
},
|
||||
programMetaItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: SPACING[1],
|
||||
},
|
||||
|
||||
// New Releases
|
||||
releaseRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: SPACING[3],
|
||||
paddingHorizontal: SPACING[4],
|
||||
backgroundColor: DARK.SURFACE,
|
||||
borderRadius: RADIUS.LG,
|
||||
marginBottom: SPACING[2],
|
||||
gap: SPACING[3],
|
||||
},
|
||||
releaseAvatar: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 22,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
releaseInitial: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
color: TEXT.PRIMARY,
|
||||
},
|
||||
releaseInfo: {
|
||||
flex: 1,
|
||||
gap: 2,
|
||||
},
|
||||
})
|
||||
@@ -1,156 +1,416 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import {
|
||||
Animated,
|
||||
Pressable,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import { useRouter, Redirect } from 'expo-router'
|
||||
import { StatusBar } from 'expo-status-bar'
|
||||
import { LinearGradient } from 'expo-linear-gradient'
|
||||
/**
|
||||
* TabataFit Home Screen
|
||||
* React Native UI — wired to shared data
|
||||
*/
|
||||
|
||||
import { View, StyleSheet, ScrollView, Pressable, Dimensions, Text as RNText, Image as RNImage } from 'react-native'
|
||||
import { useRouter } from 'expo-router'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { LinearGradient } from 'expo-linear-gradient'
|
||||
import { BlurView } from 'expo-blur'
|
||||
import Ionicons from '@expo/vector-icons/Ionicons'
|
||||
|
||||
import { BRAND, TEXT, APP_GRADIENTS, ACCENT } from '@/src/shared/constants/colors'
|
||||
import { TYPOGRAPHY } from '@/src/shared/constants/typography'
|
||||
import { SHADOW, TEXT_SHADOW } from '@/src/shared/constants/shadows'
|
||||
import { DURATION, EASING } from '@/src/shared/constants/animations'
|
||||
import { useIsOnboardingComplete } from '@/src/features/onboarding/hooks/useOnboarding'
|
||||
import { useMemo } from 'react'
|
||||
import { useHaptics } from '@/src/shared/hooks'
|
||||
import { useUserStore, useActivityStore } from '@/src/shared/stores'
|
||||
import {
|
||||
getFeaturedWorkouts,
|
||||
getPopularWorkouts,
|
||||
getTrainerById,
|
||||
COLLECTIONS,
|
||||
WORKOUTS,
|
||||
} from '@/src/shared/data'
|
||||
import { StyledText } from '@/src/shared/components/StyledText'
|
||||
|
||||
export default function HomeScreen() {
|
||||
const router = useRouter()
|
||||
const insets = useSafeAreaInsets()
|
||||
const isOnboardingComplete = useIsOnboardingComplete()
|
||||
import {
|
||||
BRAND,
|
||||
DARK,
|
||||
TEXT,
|
||||
GLASS,
|
||||
SHADOW,
|
||||
GRADIENTS,
|
||||
} from '@/src/shared/constants/colors'
|
||||
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
|
||||
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
||||
|
||||
const glowAnim = useRef(new Animated.Value(0)).current
|
||||
const { width: SCREEN_WIDTH } = Dimensions.get('window')
|
||||
const CARD_WIDTH = SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2
|
||||
|
||||
// Show nothing while Zustand hydrates
|
||||
if (isOnboardingComplete === undefined) {
|
||||
return null
|
||||
}
|
||||
const FONTS = {
|
||||
LARGE_TITLE: 34,
|
||||
TITLE: 28,
|
||||
TITLE_2: 22,
|
||||
HEADLINE: 17,
|
||||
BODY: 17,
|
||||
SUBHEADLINE: 15,
|
||||
CAPTION_1: 12,
|
||||
CAPTION_2: 11,
|
||||
}
|
||||
|
||||
// Redirect to onboarding if not complete
|
||||
if (isOnboardingComplete === false) {
|
||||
return <Redirect href="/onboarding" />
|
||||
}
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// HELPERS
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
useEffect(() => {
|
||||
Animated.loop(
|
||||
Animated.sequence([
|
||||
Animated.timing(glowAnim, {
|
||||
toValue: 1,
|
||||
duration: DURATION.BREATH,
|
||||
easing: EASING.STANDARD,
|
||||
useNativeDriver: false,
|
||||
}),
|
||||
Animated.timing(glowAnim, {
|
||||
toValue: 0,
|
||||
duration: DURATION.BREATH,
|
||||
easing: EASING.STANDARD,
|
||||
useNativeDriver: false,
|
||||
}),
|
||||
])
|
||||
).start()
|
||||
}, [])
|
||||
|
||||
const glowOpacity = glowAnim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [0.15, 0.4],
|
||||
})
|
||||
|
||||
const glowScale = glowAnim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [1, 1.12],
|
||||
})
|
||||
function getGreeting() {
|
||||
const hour = new Date().getHours()
|
||||
if (hour < 12) return 'Good morning'
|
||||
if (hour < 18) return 'Good afternoon'
|
||||
return 'Good evening'
|
||||
}
|
||||
|
||||
function PrimaryButton({ children, onPress }: { children: string; onPress?: () => void }) {
|
||||
return (
|
||||
<LinearGradient
|
||||
colors={APP_GRADIENTS.HOME}
|
||||
style={[styles.container, { paddingTop: insets.top + 40 }]}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
>
|
||||
<StatusBar style="light" />
|
||||
|
||||
<View style={styles.brandArea}>
|
||||
<Text style={styles.title}>TABATA</Text>
|
||||
<Text style={styles.subtitle}>GO</Text>
|
||||
<Text style={styles.tagline}>4 minutes. Tout donner.</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.buttonArea}>
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.buttonGlow,
|
||||
{ opacity: glowOpacity, transform: [{ scale: glowScale }] },
|
||||
]}
|
||||
/>
|
||||
<Pressable
|
||||
style={({ pressed }) => [
|
||||
styles.startButton,
|
||||
pressed && styles.startButtonPressed,
|
||||
]}
|
||||
onPress={() => router.push('/timer')}
|
||||
>
|
||||
<Text style={styles.startButtonText}>START</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
<Pressable style={styles.primaryButton} onPress={onPress}>
|
||||
<Ionicons name="play" size={16} color={TEXT.PRIMARY} style={styles.buttonIcon} />
|
||||
<RNText style={styles.primaryButtonText}>{children}</RNText>
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
|
||||
function PlainButton({ children, onPress }: { children: string; onPress?: () => void }) {
|
||||
return (
|
||||
<Pressable onPress={onPress}>
|
||||
<RNText style={styles.plainButtonText}>{children}</RNText>
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// MAIN SCREEN
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
export default function HomeScreen() {
|
||||
const insets = useSafeAreaInsets()
|
||||
const router = useRouter()
|
||||
const haptics = useHaptics()
|
||||
const userName = useUserStore((s) => s.profile.name)
|
||||
const history = useActivityStore((s) => s.history)
|
||||
const recentWorkouts = useMemo(() => history.slice(0, 3), [history])
|
||||
|
||||
const featured = getFeaturedWorkouts()[0] ?? WORKOUTS[0]
|
||||
const featuredTrainer = getTrainerById(featured.trainerId)
|
||||
const popular = getPopularWorkouts(4)
|
||||
|
||||
const handleWorkoutPress = (id: string) => {
|
||||
haptics.buttonTap()
|
||||
router.push(`/workout/${id}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<StyledText size={FONTS.LARGE_TITLE} weight="semibold" color={TEXT.PRIMARY}>
|
||||
{getGreeting() + ', ' + userName}
|
||||
</StyledText>
|
||||
<Pressable style={styles.profileButton}>
|
||||
<Ionicons name="person-circle-outline" size={32} color={TEXT.PRIMARY} />
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
{/* Featured */}
|
||||
<Pressable
|
||||
style={styles.featuredCard}
|
||||
onPress={() => handleWorkoutPress(featured.id)}
|
||||
>
|
||||
{featured.thumbnailUrl ? (
|
||||
<RNImage
|
||||
source={{ uri: featured.thumbnailUrl }}
|
||||
style={StyleSheet.absoluteFill}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
) : (
|
||||
<LinearGradient
|
||||
colors={[BRAND.PRIMARY, BRAND.PRIMARY_DARK]}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
)}
|
||||
<LinearGradient
|
||||
colors={GRADIENTS.VIDEO_OVERLAY}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
|
||||
<View style={styles.featuredBadge}>
|
||||
<RNText style={styles.featuredBadgeText}>🔥 FEATURED</RNText>
|
||||
</View>
|
||||
|
||||
<View style={styles.featuredContent}>
|
||||
<StyledText size={FONTS.TITLE} weight="bold" color={TEXT.PRIMARY}>
|
||||
{featured.title}
|
||||
</StyledText>
|
||||
<StyledText size={FONTS.SUBHEADLINE} color={TEXT.SECONDARY}>
|
||||
{featured.duration + ' min • ' + featured.level + ' • ' + (featuredTrainer?.name ?? '')}
|
||||
</StyledText>
|
||||
|
||||
<View style={styles.featuredButtons}>
|
||||
<PrimaryButton onPress={() => handleWorkoutPress(featured.id)}>START</PrimaryButton>
|
||||
<Pressable style={styles.saveButton}>
|
||||
<Ionicons name="heart-outline" size={24} color={TEXT.PRIMARY} />
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
</Pressable>
|
||||
|
||||
{/* Continue Watching — from activity store */}
|
||||
{recentWorkouts.length > 0 && (
|
||||
<View style={styles.section}>
|
||||
<View style={styles.sectionHeader}>
|
||||
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>Recent</StyledText>
|
||||
<PlainButton>See All</PlainButton>
|
||||
</View>
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={styles.horizontalScroll}
|
||||
>
|
||||
{recentWorkouts.map((result) => {
|
||||
const workout = WORKOUTS.find(w => w.id === result.workoutId)
|
||||
if (!workout) return null
|
||||
const trainer = getTrainerById(workout.trainerId)
|
||||
return (
|
||||
<Pressable
|
||||
key={result.id}
|
||||
style={styles.continueCard}
|
||||
onPress={() => handleWorkoutPress(result.workoutId)}
|
||||
>
|
||||
<View style={styles.continueThumb}>
|
||||
<LinearGradient
|
||||
colors={[trainer?.color ?? BRAND.PRIMARY, BRAND.PRIMARY_LIGHT]}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT.PRIMARY}>
|
||||
{trainer?.name[0] ?? 'T'}
|
||||
</StyledText>
|
||||
</View>
|
||||
<StyledText size={FONTS.SUBHEADLINE} weight="semibold" color={TEXT.PRIMARY}>{workout.title}</StyledText>
|
||||
<StyledText size={FONTS.CAPTION_2} color={TEXT.TERTIARY}>
|
||||
{result.calories + ' cal • ' + result.durationMinutes + ' min'}
|
||||
</StyledText>
|
||||
</Pressable>
|
||||
)
|
||||
})}
|
||||
</ScrollView>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Popular This Week */}
|
||||
<View style={styles.section}>
|
||||
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>Popular This Week</StyledText>
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={styles.horizontalScroll}
|
||||
>
|
||||
{popular.map((item) => (
|
||||
<Pressable
|
||||
key={item.id}
|
||||
style={styles.popularCard}
|
||||
onPress={() => handleWorkoutPress(item.id)}
|
||||
>
|
||||
<View style={styles.popularThumb}>
|
||||
<Ionicons name="flame" size={24} color={BRAND.PRIMARY} />
|
||||
</View>
|
||||
<StyledText size={FONTS.SUBHEADLINE} weight="medium" color={TEXT.PRIMARY}>{item.title}</StyledText>
|
||||
<StyledText size={FONTS.CAPTION_2} color={TEXT.TERTIARY}>{item.duration + ' min'}</StyledText>
|
||||
</Pressable>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
{/* Collections */}
|
||||
<View style={styles.section}>
|
||||
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>Collections</StyledText>
|
||||
{COLLECTIONS.map((item) => (
|
||||
<Pressable key={item.id} style={styles.collectionCard} onPress={() => { haptics.buttonTap(); router.push(`/collection/${item.id}`) }}>
|
||||
<BlurView intensity={GLASS.BLUR_MEDIUM} tint="dark" style={StyleSheet.absoluteFill} />
|
||||
<View style={styles.collectionContent}>
|
||||
<RNText style={styles.collectionIcon}>{item.icon}</RNText>
|
||||
<View style={styles.collectionText}>
|
||||
<StyledText size={FONTS.HEADLINE} weight="semibold" color={TEXT.PRIMARY}>{item.title}</StyledText>
|
||||
<StyledText size={FONTS.CAPTION_1} color={TEXT.TERTIARY}>
|
||||
{item.workoutIds.length + ' workouts • ' + item.description}
|
||||
</StyledText>
|
||||
</View>
|
||||
<Ionicons name="chevron-forward" size={20} color={TEXT.TERTIARY} />
|
||||
</View>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// STYLES
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: DARK.BASE,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
},
|
||||
|
||||
// Header
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: SPACING[6],
|
||||
},
|
||||
profileButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
brandArea: {
|
||||
|
||||
// Buttons
|
||||
primaryButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
title: {
|
||||
...TYPOGRAPHY.brandTitle,
|
||||
color: BRAND.PRIMARY,
|
||||
...TEXT_SHADOW.BRAND,
|
||||
},
|
||||
subtitle: {
|
||||
...TYPOGRAPHY.displaySmall,
|
||||
color: TEXT.PRIMARY,
|
||||
marginTop: -6,
|
||||
},
|
||||
tagline: {
|
||||
...TYPOGRAPHY.caption,
|
||||
color: TEXT.HINT,
|
||||
fontStyle: 'italic',
|
||||
marginTop: 12,
|
||||
},
|
||||
buttonArea: {
|
||||
marginTop: 72,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
buttonGlow: {
|
||||
position: 'absolute',
|
||||
width: 172,
|
||||
height: 172,
|
||||
borderRadius: 86,
|
||||
backgroundColor: ACCENT.ORANGE,
|
||||
},
|
||||
startButton: {
|
||||
width: 160,
|
||||
height: 160,
|
||||
borderRadius: 80,
|
||||
backgroundColor: BRAND.PRIMARY,
|
||||
paddingHorizontal: SPACING[4],
|
||||
paddingVertical: SPACING[3],
|
||||
borderRadius: RADIUS.SM,
|
||||
},
|
||||
buttonIcon: {
|
||||
marginRight: SPACING[2],
|
||||
},
|
||||
primaryButtonText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: TEXT.PRIMARY,
|
||||
},
|
||||
plainButtonText: {
|
||||
fontSize: FONTS.BODY,
|
||||
color: BRAND.PRIMARY,
|
||||
},
|
||||
|
||||
// Featured
|
||||
featuredCard: {
|
||||
width: CARD_WIDTH,
|
||||
height: 220,
|
||||
borderRadius: RADIUS.GLASS_CARD,
|
||||
overflow: 'hidden',
|
||||
marginBottom: SPACING[8],
|
||||
...SHADOW.lg,
|
||||
},
|
||||
featuredBadge: {
|
||||
position: 'absolute',
|
||||
top: SPACING[4],
|
||||
left: SPACING[4],
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.15)',
|
||||
paddingHorizontal: SPACING[3],
|
||||
paddingVertical: SPACING[1],
|
||||
borderRadius: RADIUS.SM,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
},
|
||||
featuredBadgeText: {
|
||||
fontSize: 11,
|
||||
fontWeight: 'bold',
|
||||
color: TEXT.PRIMARY,
|
||||
},
|
||||
featuredContent: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
padding: SPACING[5],
|
||||
},
|
||||
featuredButtons: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: SPACING[3],
|
||||
marginTop: SPACING[4],
|
||||
},
|
||||
saveButton: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
...SHADOW.BRAND_GLOW,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
borderRadius: 22,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.15)',
|
||||
},
|
||||
startButtonPressed: {
|
||||
transform: [{ scale: 0.95 }],
|
||||
|
||||
// Sections
|
||||
section: {
|
||||
marginBottom: SPACING[8],
|
||||
},
|
||||
startButtonText: {
|
||||
...TYPOGRAPHY.buttonHero,
|
||||
color: TEXT.PRIMARY,
|
||||
letterSpacing: 4,
|
||||
sectionHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: SPACING[4],
|
||||
},
|
||||
horizontalScroll: {
|
||||
gap: SPACING[3],
|
||||
},
|
||||
|
||||
// Continue Card
|
||||
continueCard: {
|
||||
width: 140,
|
||||
},
|
||||
continueThumb: {
|
||||
width: 140,
|
||||
height: 200,
|
||||
borderRadius: RADIUS.LG,
|
||||
overflow: 'hidden',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: SPACING[2],
|
||||
},
|
||||
|
||||
// Popular Card
|
||||
popularCard: {
|
||||
width: 120,
|
||||
},
|
||||
popularThumb: {
|
||||
width: 120,
|
||||
height: 120,
|
||||
borderRadius: RADIUS.LG,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: SPACING[2],
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
||||
},
|
||||
|
||||
// Collection Card
|
||||
collectionCard: {
|
||||
height: 80,
|
||||
borderRadius: RADIUS.LG,
|
||||
overflow: 'hidden',
|
||||
marginBottom: SPACING[3],
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
},
|
||||
collectionContent: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: SPACING[5],
|
||||
},
|
||||
collectionIcon: {
|
||||
fontSize: 28,
|
||||
marginRight: SPACING[4],
|
||||
},
|
||||
collectionText: {
|
||||
flex: 1,
|
||||
},
|
||||
})
|
||||
|
||||
236
app/(tabs)/profile.tsx
Normal file
236
app/(tabs)/profile.tsx
Normal file
@@ -0,0 +1,236 @@
|
||||
/**
|
||||
* TabataFit Profile Screen
|
||||
* React Native + SwiftUI Islands — wired to shared data
|
||||
*/
|
||||
|
||||
import { View, StyleSheet, ScrollView, Text as RNText } from 'react-native'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { LinearGradient } from 'expo-linear-gradient'
|
||||
import { BlurView } from 'expo-blur'
|
||||
import Ionicons from '@expo/vector-icons/Ionicons'
|
||||
import {
|
||||
Host,
|
||||
List,
|
||||
Section,
|
||||
Switch,
|
||||
Text,
|
||||
LabeledContent,
|
||||
} from '@expo/ui/swift-ui'
|
||||
|
||||
import { useUserStore } from '@/src/shared/stores'
|
||||
import { StyledText } from '@/src/shared/components/StyledText'
|
||||
|
||||
import {
|
||||
BRAND,
|
||||
DARK,
|
||||
TEXT,
|
||||
GLASS,
|
||||
SHADOW,
|
||||
GRADIENTS,
|
||||
} from '@/src/shared/constants/colors'
|
||||
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
|
||||
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
||||
|
||||
const FONTS = {
|
||||
LARGE_TITLE: 34,
|
||||
TITLE_2: 22,
|
||||
HEADLINE: 17,
|
||||
SUBHEADLINE: 15,
|
||||
CAPTION_1: 12,
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// MAIN SCREEN
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
export default function ProfileScreen() {
|
||||
const insets = useSafeAreaInsets()
|
||||
const profile = useUserStore((s) => s.profile)
|
||||
const settings = useUserStore((s) => s.settings)
|
||||
const updateSettings = useUserStore((s) => s.updateSettings)
|
||||
|
||||
const isPremium = profile.subscription !== 'free'
|
||||
const planLabel = isPremium ? 'TabataFit+' : 'Free'
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Header */}
|
||||
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT.PRIMARY}>
|
||||
Profile
|
||||
</StyledText>
|
||||
|
||||
{/* Profile Card */}
|
||||
<View style={styles.profileCard}>
|
||||
<BlurView intensity={GLASS.BLUR_MEDIUM} tint="dark" style={StyleSheet.absoluteFill} />
|
||||
<View style={styles.avatarContainer}>
|
||||
<LinearGradient
|
||||
colors={GRADIENTS.CTA}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT.PRIMARY}>
|
||||
{profile.name[0]}
|
||||
</StyledText>
|
||||
</View>
|
||||
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>
|
||||
{profile.name}
|
||||
</StyledText>
|
||||
<StyledText size={FONTS.SUBHEADLINE} color={TEXT.TERTIARY}>
|
||||
{profile.email}
|
||||
</StyledText>
|
||||
{isPremium && (
|
||||
<View style={styles.premiumBadge}>
|
||||
<Ionicons name="star" size={12} color={BRAND.PRIMARY} />
|
||||
<StyledText size={FONTS.CAPTION_1} weight="semibold" color={TEXT.PRIMARY}>
|
||||
{planLabel}
|
||||
</StyledText>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Subscription */}
|
||||
{isPremium && (
|
||||
<View style={styles.subscriptionCard}>
|
||||
<LinearGradient
|
||||
colors={GRADIENTS.CTA}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
<View style={styles.subscriptionContent}>
|
||||
<Ionicons name="ribbon" size={24} color={TEXT.PRIMARY} />
|
||||
<View style={styles.subscriptionInfo}>
|
||||
<StyledText size={FONTS.HEADLINE} weight="bold" color={TEXT.PRIMARY}>
|
||||
{planLabel}
|
||||
</StyledText>
|
||||
<StyledText size={FONTS.CAPTION_1} color={TEXT.SECONDARY}>
|
||||
{'Member since ' + profile.joinDate}
|
||||
</StyledText>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* SwiftUI Island: Settings */}
|
||||
<Host useViewportSizeMeasurement colorScheme="dark" style={{ height: 385 }}>
|
||||
<List listStyle="insetGrouped" scrollEnabled={false}>
|
||||
<Section title="WORKOUT">
|
||||
<Switch
|
||||
label="Haptic Feedback"
|
||||
value={settings.haptics}
|
||||
onValueChange={(v) => updateSettings({ haptics: v })}
|
||||
color={BRAND.PRIMARY}
|
||||
/>
|
||||
<Switch
|
||||
label="Sound Effects"
|
||||
value={settings.soundEffects}
|
||||
onValueChange={(v) => updateSettings({ soundEffects: v })}
|
||||
color={BRAND.PRIMARY}
|
||||
/>
|
||||
<Switch
|
||||
label="Voice Coaching"
|
||||
value={settings.voiceCoaching}
|
||||
onValueChange={(v) => updateSettings({ voiceCoaching: v })}
|
||||
color={BRAND.PRIMARY}
|
||||
/>
|
||||
</Section>
|
||||
<Section title="NOTIFICATIONS">
|
||||
<Switch
|
||||
label="Daily Reminders"
|
||||
value={settings.reminders}
|
||||
onValueChange={(v) => updateSettings({ reminders: v })}
|
||||
color={BRAND.PRIMARY}
|
||||
/>
|
||||
<LabeledContent label="Reminder Time">
|
||||
<Text color={TEXT.TERTIARY}>{settings.reminderTime.replace(':00', ':00 AM')}</Text>
|
||||
</LabeledContent>
|
||||
</Section>
|
||||
</List>
|
||||
</Host>
|
||||
|
||||
{/* Version */}
|
||||
<StyledText size={FONTS.CAPTION_1} color={TEXT.TERTIARY} style={styles.versionText}>
|
||||
TabataFit v1.0.0
|
||||
</StyledText>
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// STYLES
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: DARK.BASE,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
},
|
||||
|
||||
// Profile Card
|
||||
profileCard: {
|
||||
borderRadius: RADIUS.GLASS_CARD,
|
||||
overflow: 'hidden',
|
||||
marginBottom: SPACING[6],
|
||||
marginTop: SPACING[4],
|
||||
alignItems: 'center',
|
||||
paddingVertical: SPACING[6],
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
...SHADOW.md,
|
||||
},
|
||||
avatarContainer: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 40,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: SPACING[3],
|
||||
overflow: 'hidden',
|
||||
},
|
||||
premiumBadge: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(255, 107, 53, 0.15)',
|
||||
paddingHorizontal: SPACING[3],
|
||||
paddingVertical: SPACING[1],
|
||||
borderRadius: RADIUS.FULL,
|
||||
marginTop: SPACING[3],
|
||||
gap: SPACING[1],
|
||||
},
|
||||
|
||||
// Subscription Card
|
||||
subscriptionCard: {
|
||||
height: 80,
|
||||
borderRadius: RADIUS.LG,
|
||||
overflow: 'hidden',
|
||||
marginBottom: SPACING[6],
|
||||
...SHADOW.BRAND_GLOW,
|
||||
},
|
||||
subscriptionContent: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: SPACING[4],
|
||||
gap: SPACING[3],
|
||||
},
|
||||
subscriptionInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
|
||||
// Version Text
|
||||
versionText: {
|
||||
textAlign: 'center',
|
||||
marginTop: SPACING[6],
|
||||
},
|
||||
})
|
||||
279
app/(tabs)/workouts.tsx
Normal file
279
app/(tabs)/workouts.tsx
Normal file
@@ -0,0 +1,279 @@
|
||||
/**
|
||||
* TabataFit Workouts Screen
|
||||
* React Native + SwiftUI Islands — wired to shared data
|
||||
*/
|
||||
|
||||
import { useState } from 'react'
|
||||
import { View, StyleSheet, ScrollView, Pressable, Dimensions, Text as RNText } from 'react-native'
|
||||
import { useRouter } from 'expo-router'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { BlurView } from 'expo-blur'
|
||||
import Ionicons from '@expo/vector-icons/Ionicons'
|
||||
import { Host, Picker } from '@expo/ui/swift-ui'
|
||||
|
||||
import { useHaptics } from '@/src/shared/hooks'
|
||||
import { WORKOUTS, TRAINERS, CATEGORIES, getTrainerById } from '@/src/shared/data'
|
||||
import { StyledText } from '@/src/shared/components/StyledText'
|
||||
|
||||
import {
|
||||
BRAND,
|
||||
DARK,
|
||||
TEXT,
|
||||
GLASS,
|
||||
SHADOW,
|
||||
} from '@/src/shared/constants/colors'
|
||||
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
|
||||
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
||||
|
||||
const { width: SCREEN_WIDTH } = Dimensions.get('window')
|
||||
const CARD_WIDTH = (SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2 - SPACING[3]) / 2
|
||||
|
||||
const FONTS = {
|
||||
LARGE_TITLE: 34,
|
||||
TITLE_2: 22,
|
||||
HEADLINE: 17,
|
||||
SUBHEADLINE: 15,
|
||||
CAPTION_1: 12,
|
||||
CAPTION_2: 11,
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// MAIN SCREEN
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
export default function WorkoutsScreen() {
|
||||
const insets = useSafeAreaInsets()
|
||||
const router = useRouter()
|
||||
const haptics = useHaptics()
|
||||
const [selectedCategoryIndex, setSelectedCategoryIndex] = useState(0)
|
||||
|
||||
const selectedCategory = CATEGORIES[selectedCategoryIndex].id
|
||||
|
||||
const filteredWorkouts = selectedCategory === 'all'
|
||||
? WORKOUTS
|
||||
: WORKOUTS.filter(w => w.category === selectedCategory)
|
||||
|
||||
const handleWorkoutPress = (id: string) => {
|
||||
haptics.buttonTap()
|
||||
router.push(`/workout/${id}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT.PRIMARY}>Workouts</StyledText>
|
||||
<StyledText size={FONTS.SUBHEADLINE} color={TEXT.TERTIARY}>{WORKOUTS.length + ' workouts available'}</StyledText>
|
||||
</View>
|
||||
|
||||
{/* SwiftUI Island: Category Picker */}
|
||||
<Host matchContents useViewportSizeMeasurement colorScheme="dark" style={styles.pickerIsland}>
|
||||
<Picker
|
||||
variant="segmented"
|
||||
options={CATEGORIES.map(c => c.label)}
|
||||
selectedIndex={selectedCategoryIndex}
|
||||
onOptionSelected={(e) => {
|
||||
haptics.selection()
|
||||
setSelectedCategoryIndex(e.nativeEvent.index)
|
||||
}}
|
||||
color={BRAND.PRIMARY}
|
||||
/>
|
||||
</Host>
|
||||
|
||||
{/* Trainers */}
|
||||
<View style={styles.section}>
|
||||
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>Trainers</StyledText>
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={styles.trainersScroll}
|
||||
>
|
||||
{TRAINERS.map((trainer) => (
|
||||
<Pressable key={trainer.id} style={styles.trainerCard}>
|
||||
<BlurView intensity={GLASS.BLUR_MEDIUM} tint="dark" style={StyleSheet.absoluteFill} />
|
||||
<View style={[styles.trainerAvatar, { backgroundColor: trainer.color }]}>
|
||||
<StyledText size={FONTS.TITLE_2} weight="bold" color={TEXT.PRIMARY}>{trainer.name[0]}</StyledText>
|
||||
</View>
|
||||
<StyledText size={FONTS.SUBHEADLINE} weight="semibold" color={TEXT.PRIMARY}>{trainer.name}</StyledText>
|
||||
<StyledText size={FONTS.CAPTION_2} color={TEXT.TERTIARY}>{trainer.specialty}</StyledText>
|
||||
</Pressable>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
{/* Workouts Grid */}
|
||||
<View style={styles.section}>
|
||||
<View style={styles.sectionHeader}>
|
||||
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>
|
||||
{selectedCategory === 'all' ? 'All Workouts' : (CATEGORIES.find(c => c.id === selectedCategory)?.label ?? 'All Workouts')}
|
||||
</StyledText>
|
||||
{selectedCategory !== 'all' && (
|
||||
<Pressable onPress={() => { haptics.buttonTap(); router.push(`/workout/category/${selectedCategory}`) }}>
|
||||
<StyledText size={FONTS.SUBHEADLINE} color={BRAND.PRIMARY} weight="medium">See All</StyledText>
|
||||
</Pressable>
|
||||
)}
|
||||
</View>
|
||||
<View style={styles.workoutsGrid}>
|
||||
{filteredWorkouts.map((workout) => {
|
||||
const trainer = getTrainerById(workout.trainerId)
|
||||
return (
|
||||
<Pressable
|
||||
key={workout.id}
|
||||
style={styles.workoutCard}
|
||||
onPress={() => handleWorkoutPress(workout.id)}
|
||||
>
|
||||
<BlurView intensity={GLASS.BLUR_MEDIUM} tint="dark" style={StyleSheet.absoluteFill} />
|
||||
|
||||
<View style={styles.durationBadge}>
|
||||
<StyledText size={FONTS.CAPTION_2} weight="semibold" color={TEXT.PRIMARY}>{workout.duration + ' min'}</StyledText>
|
||||
</View>
|
||||
|
||||
<View style={[styles.workoutTrainerBadge, { backgroundColor: trainer?.color }]}>
|
||||
<StyledText size={FONTS.CAPTION_1} weight="bold" color={TEXT.PRIMARY}>{trainer?.name[0] ?? 'T'}</StyledText>
|
||||
</View>
|
||||
|
||||
<View style={styles.playOverlay}>
|
||||
<View style={styles.playCircle}>
|
||||
<Ionicons name="play" size={20} color={TEXT.PRIMARY} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.workoutInfo}>
|
||||
<StyledText size={FONTS.SUBHEADLINE} weight="semibold" color={TEXT.PRIMARY}>{workout.title}</StyledText>
|
||||
<StyledText size={FONTS.CAPTION_1} color={BRAND.PRIMARY}>{workout.level}</StyledText>
|
||||
</View>
|
||||
</Pressable>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// STYLES
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: DARK.BASE,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
},
|
||||
|
||||
// Header
|
||||
header: {
|
||||
marginBottom: SPACING[6],
|
||||
},
|
||||
|
||||
// Picker Island
|
||||
pickerIsland: {
|
||||
marginBottom: SPACING[6],
|
||||
},
|
||||
|
||||
// Section
|
||||
section: {
|
||||
marginBottom: SPACING[8],
|
||||
},
|
||||
sectionHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: SPACING[2],
|
||||
},
|
||||
|
||||
// Trainers
|
||||
trainersScroll: {
|
||||
gap: SPACING[3],
|
||||
},
|
||||
trainerCard: {
|
||||
width: 100,
|
||||
alignItems: 'center',
|
||||
paddingVertical: SPACING[4],
|
||||
borderRadius: RADIUS.LG,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
trainerAvatar: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 24,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: SPACING[2],
|
||||
},
|
||||
|
||||
// Workouts Grid
|
||||
workoutsGrid: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: SPACING[3],
|
||||
},
|
||||
workoutCard: {
|
||||
width: CARD_WIDTH,
|
||||
height: 180,
|
||||
borderRadius: RADIUS.GLASS_CARD,
|
||||
overflow: 'hidden',
|
||||
...SHADOW.md,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
},
|
||||
durationBadge: {
|
||||
position: 'absolute',
|
||||
top: SPACING[2],
|
||||
right: SPACING[2],
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
paddingHorizontal: SPACING[2],
|
||||
paddingVertical: SPACING[1],
|
||||
borderRadius: RADIUS.SM,
|
||||
},
|
||||
workoutTrainerBadge: {
|
||||
position: 'absolute',
|
||||
top: SPACING[2],
|
||||
left: SPACING[2],
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 14,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
playOverlay: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 60,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
playCircle: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 22,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||||
},
|
||||
workoutInfo: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
padding: SPACING[3],
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user