feat: category/collection detail screens + Inter font loading
New screens: - Category detail (workout/category/[id]): filtered workout list with SwiftUI segmented Picker for level sub-filter - Collection detail (collection/[id]): hero header with gradient, stats (workouts/minutes/calories), numbered workout list Root layout: - Inter font loading (400-900 weights) via @expo-google-fonts - SplashScreen integration for font loading gate - Route config for all screens with appropriate animations Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Millian Lamiaux
211
app/collection/[id].tsx
Normal file
211
app/collection/[id].tsx
Normal file
@@ -0,0 +1,211 @@
|
||||
/**
|
||||
* TabataFit Collection Detail Screen
|
||||
* Shows collection info + ordered workout list
|
||||
*/
|
||||
|
||||
import { useMemo } from 'react'
|
||||
import { View, StyleSheet, ScrollView, Pressable, Text as RNText } from 'react-native'
|
||||
import { useRouter, useLocalSearchParams } from 'expo-router'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { LinearGradient } from 'expo-linear-gradient'
|
||||
import Ionicons from '@expo/vector-icons/Ionicons'
|
||||
|
||||
import { useHaptics } from '@/src/shared/hooks'
|
||||
import { getCollectionById, getCollectionWorkouts, getTrainerById, COLLECTION_COLORS } from '@/src/shared/data'
|
||||
import { StyledText } from '@/src/shared/components/StyledText'
|
||||
|
||||
import {
|
||||
BRAND,
|
||||
DARK,
|
||||
TEXT,
|
||||
} from '@/src/shared/constants/colors'
|
||||
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
|
||||
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
||||
|
||||
export default function CollectionDetailScreen() {
|
||||
const insets = useSafeAreaInsets()
|
||||
const router = useRouter()
|
||||
const haptics = useHaptics()
|
||||
const { id } = useLocalSearchParams<{ id: string }>()
|
||||
|
||||
const collection = id ? getCollectionById(id) : null
|
||||
const workouts = useMemo(
|
||||
() => id ? getCollectionWorkouts(id) : [],
|
||||
[id]
|
||||
)
|
||||
const collectionColor = COLLECTION_COLORS[id ?? ''] ?? BRAND.PRIMARY
|
||||
|
||||
const handleBack = () => {
|
||||
haptics.selection()
|
||||
router.back()
|
||||
}
|
||||
|
||||
const handleWorkoutPress = (workoutId: string) => {
|
||||
haptics.buttonTap()
|
||||
router.push(`/workout/${workoutId}`)
|
||||
}
|
||||
|
||||
if (!collection) {
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top, alignItems: 'center', justifyContent: 'center' }]}>
|
||||
<RNText style={{ color: TEXT.PRIMARY, fontSize: 17 }}>Collection not found</RNText>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const totalMinutes = workouts.reduce((sum, w) => sum + (w?.duration ?? 0), 0)
|
||||
const totalCalories = workouts.reduce((sum, w) => sum + (w?.calories ?? 0), 0)
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Hero Header */}
|
||||
<View style={styles.hero}>
|
||||
<LinearGradient
|
||||
colors={collection.gradient ?? [collectionColor, BRAND.PRIMARY_DARK]}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
|
||||
<Pressable onPress={handleBack} style={styles.backButton}>
|
||||
<Ionicons name="chevron-back" size={24} color={TEXT.PRIMARY} />
|
||||
</Pressable>
|
||||
|
||||
<View style={styles.heroContent}>
|
||||
<RNText style={styles.heroIcon}>{collection.icon}</RNText>
|
||||
<StyledText size={28} weight="bold" color={TEXT.PRIMARY}>{collection.title}</StyledText>
|
||||
<StyledText size={15} color={TEXT.SECONDARY}>{collection.description}</StyledText>
|
||||
|
||||
<View style={styles.heroStats}>
|
||||
<View style={styles.heroStat}>
|
||||
<Ionicons name="fitness" size={14} color={TEXT.PRIMARY} />
|
||||
<StyledText size={13} color={TEXT.PRIMARY}>{workouts.length + ' workouts'}</StyledText>
|
||||
</View>
|
||||
<View style={styles.heroStat}>
|
||||
<Ionicons name="time" size={14} color={TEXT.PRIMARY} />
|
||||
<StyledText size={13} color={TEXT.PRIMARY}>{totalMinutes + ' min total'}</StyledText>
|
||||
</View>
|
||||
<View style={styles.heroStat}>
|
||||
<Ionicons name="flame" size={14} color={TEXT.PRIMARY} />
|
||||
<StyledText size={13} color={TEXT.PRIMARY}>{totalCalories + ' cal'}</StyledText>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Workout List */}
|
||||
<View style={styles.workoutList}>
|
||||
{workouts.map((workout, index) => {
|
||||
if (!workout) return null
|
||||
const trainer = getTrainerById(workout.trainerId)
|
||||
return (
|
||||
<Pressable
|
||||
key={workout.id}
|
||||
style={styles.workoutCard}
|
||||
onPress={() => handleWorkoutPress(workout.id)}
|
||||
>
|
||||
<View style={[styles.workoutNumber, { backgroundColor: `${collectionColor}20` }]}>
|
||||
<RNText style={[styles.workoutNumberText, { color: collectionColor }]}>{index + 1}</RNText>
|
||||
</View>
|
||||
<View style={styles.workoutInfo}>
|
||||
<StyledText size={17} weight="semibold" color={TEXT.PRIMARY}>{workout.title}</StyledText>
|
||||
<StyledText size={13} color={TEXT.TERTIARY}>
|
||||
{trainer?.name + ' \u00B7 ' + workout.duration + ' min \u00B7 ' + workout.level}
|
||||
</StyledText>
|
||||
</View>
|
||||
<View style={styles.workoutMeta}>
|
||||
<StyledText size={13} color={BRAND.PRIMARY}>{workout.calories + ' cal'}</StyledText>
|
||||
<Ionicons name="play-circle" size={28} color={collectionColor} />
|
||||
</View>
|
||||
</Pressable>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: DARK.BASE,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {},
|
||||
|
||||
// Hero
|
||||
hero: {
|
||||
height: 260,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
backButton: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: SPACING[3],
|
||||
},
|
||||
heroContent: {
|
||||
position: 'absolute',
|
||||
bottom: SPACING[5],
|
||||
left: SPACING[5],
|
||||
right: SPACING[5],
|
||||
},
|
||||
heroIcon: {
|
||||
fontSize: 40,
|
||||
marginBottom: SPACING[2],
|
||||
},
|
||||
heroStats: {
|
||||
flexDirection: 'row',
|
||||
gap: SPACING[4],
|
||||
marginTop: SPACING[3],
|
||||
},
|
||||
heroStat: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: SPACING[1],
|
||||
},
|
||||
|
||||
// Workout List
|
||||
workoutList: {
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
paddingTop: SPACING[4],
|
||||
gap: SPACING[2],
|
||||
},
|
||||
workoutCard: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: SPACING[3],
|
||||
paddingHorizontal: SPACING[4],
|
||||
backgroundColor: DARK.SURFACE,
|
||||
borderRadius: RADIUS.LG,
|
||||
gap: SPACING[3],
|
||||
},
|
||||
workoutNumber: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 16,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
workoutNumberText: {
|
||||
fontSize: 15,
|
||||
fontWeight: '700',
|
||||
},
|
||||
workoutInfo: {
|
||||
flex: 1,
|
||||
gap: 2,
|
||||
},
|
||||
workoutMeta: {
|
||||
alignItems: 'flex-end',
|
||||
gap: 4,
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user