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
209
app/workout/category/[id].tsx
Normal file
209
app/workout/category/[id].tsx
Normal file
@@ -0,0 +1,209 @@
|
||||
/**
|
||||
* TabataFit Category Detail Screen
|
||||
* Filtered workout list for a specific category with level sub-filter
|
||||
*/
|
||||
|
||||
import { useState, 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 Ionicons from '@expo/vector-icons/Ionicons'
|
||||
import {
|
||||
Host,
|
||||
Picker,
|
||||
} from '@expo/ui/swift-ui'
|
||||
|
||||
import { useHaptics } from '@/src/shared/hooks'
|
||||
import { getWorkoutsByCategory, getTrainerById, CATEGORIES } from '@/src/shared/data'
|
||||
import { StyledText } from '@/src/shared/components/StyledText'
|
||||
import type { WorkoutCategory, WorkoutLevel } from '@/src/shared/types'
|
||||
|
||||
import {
|
||||
BRAND,
|
||||
DARK,
|
||||
TEXT,
|
||||
} from '@/src/shared/constants/colors'
|
||||
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
|
||||
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
||||
|
||||
const LEVELS: { id: WorkoutLevel | 'all'; label: string }[] = [
|
||||
{ id: 'all', label: 'All Levels' },
|
||||
{ id: 'Beginner', label: 'Beginner' },
|
||||
{ id: 'Intermediate', label: 'Intermediate' },
|
||||
{ id: 'Advanced', label: 'Advanced' },
|
||||
]
|
||||
|
||||
export default function CategoryDetailScreen() {
|
||||
const insets = useSafeAreaInsets()
|
||||
const router = useRouter()
|
||||
const haptics = useHaptics()
|
||||
const { id } = useLocalSearchParams<{ id: string }>()
|
||||
|
||||
const [selectedLevelIndex, setSelectedLevelIndex] = useState(0)
|
||||
|
||||
const selectedLevel = LEVELS[selectedLevelIndex].id
|
||||
const category = CATEGORIES.find(c => c.id === id)
|
||||
const categoryLabel = category?.label ?? id ?? 'Category'
|
||||
|
||||
const allWorkouts = useMemo(
|
||||
() => (id && id !== 'all') ? getWorkoutsByCategory(id as WorkoutCategory) : [],
|
||||
[id]
|
||||
)
|
||||
|
||||
const filteredWorkouts = useMemo(() => {
|
||||
if (selectedLevel === 'all') return allWorkouts
|
||||
return allWorkouts.filter(w => w.level === selectedLevel)
|
||||
}, [allWorkouts, selectedLevel])
|
||||
|
||||
const handleBack = () => {
|
||||
haptics.selection()
|
||||
router.back()
|
||||
}
|
||||
|
||||
const handleWorkoutPress = (workoutId: string) => {
|
||||
haptics.buttonTap()
|
||||
router.push(`/workout/${workoutId}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<Pressable onPress={handleBack} style={styles.backButton}>
|
||||
<Ionicons name="chevron-back" size={24} color={TEXT.PRIMARY} />
|
||||
</Pressable>
|
||||
<StyledText size={22} weight="bold" color={TEXT.PRIMARY}>{categoryLabel}</StyledText>
|
||||
<View style={styles.backButton} />
|
||||
</View>
|
||||
|
||||
{/* Level Filter */}
|
||||
<View style={styles.filterContainer}>
|
||||
<Host matchContents useViewportSizeMeasurement colorScheme="dark">
|
||||
<Picker
|
||||
selectedIndex={selectedLevelIndex}
|
||||
onOptionSelected={(e) => {
|
||||
haptics.selection()
|
||||
setSelectedLevelIndex(e.nativeEvent.index)
|
||||
}}
|
||||
variant="segmented"
|
||||
options={LEVELS.map(l => l.label)}
|
||||
color={BRAND.PRIMARY}
|
||||
/>
|
||||
</Host>
|
||||
</View>
|
||||
|
||||
<StyledText
|
||||
size={13}
|
||||
color={TEXT.TERTIARY}
|
||||
style={{ paddingHorizontal: LAYOUT.SCREEN_PADDING, marginBottom: SPACING[3] }}
|
||||
>
|
||||
{filteredWorkouts.length + ' workouts'}
|
||||
</StyledText>
|
||||
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{filteredWorkouts.map((workout) => {
|
||||
const trainer = getTrainerById(workout.trainerId)
|
||||
return (
|
||||
<Pressable
|
||||
key={workout.id}
|
||||
style={styles.workoutCard}
|
||||
onPress={() => handleWorkoutPress(workout.id)}
|
||||
>
|
||||
<View style={[styles.workoutAvatar, { backgroundColor: trainer?.color ?? BRAND.PRIMARY }]}>
|
||||
<RNText style={styles.workoutInitial}>{trainer?.name[0] ?? 'T'}</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="chevron-forward" size={16} color={TEXT.TERTIARY} />
|
||||
</View>
|
||||
</Pressable>
|
||||
)
|
||||
})}
|
||||
|
||||
{filteredWorkouts.length === 0 && (
|
||||
<View style={styles.emptyState}>
|
||||
<Ionicons name="barbell-outline" size={48} color={TEXT.TERTIARY} />
|
||||
<StyledText size={17} color={TEXT.TERTIARY} style={{ marginTop: SPACING[3] }}>
|
||||
No workouts found
|
||||
</StyledText>
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: DARK.BASE,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
paddingVertical: SPACING[3],
|
||||
},
|
||||
backButton: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
filterContainer: {
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
marginBottom: SPACING[4],
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
},
|
||||
workoutCard: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: SPACING[3],
|
||||
paddingHorizontal: SPACING[4],
|
||||
backgroundColor: DARK.SURFACE,
|
||||
borderRadius: RADIUS.LG,
|
||||
marginBottom: SPACING[2],
|
||||
gap: SPACING[3],
|
||||
},
|
||||
workoutAvatar: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 22,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
workoutInitial: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
color: TEXT.PRIMARY,
|
||||
},
|
||||
workoutInfo: {
|
||||
flex: 1,
|
||||
gap: 2,
|
||||
},
|
||||
workoutMeta: {
|
||||
alignItems: 'flex-end',
|
||||
gap: 4,
|
||||
},
|
||||
emptyState: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: SPACING[12],
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user