refactor screens, navigation & player for new architecture
Simplify Home, Activity, Profile, Complete, Player, and Program screens to work with the new Supabase-driven data layer. Update root and tab layouts. Add Settings, Terms, and Zone routes. Add OfflineBanner component and progressStore. Update all player sub-components to use the refreshed design system tokens.
This commit is contained in:
Millian Lamiaux
@@ -1,462 +1,212 @@
|
||||
/**
|
||||
* TabataFit Home Screen — Body Zone Workout Programs
|
||||
* Programs organized by Upper Body, Lower Body, Full Body
|
||||
* Dark Medical design system — navy backgrounds, green actions, no glass
|
||||
* TabataGo Home Screen
|
||||
* Mascot + 3 stat pills + 3 body zone cards + settings button.
|
||||
*/
|
||||
|
||||
import { View, StyleSheet, ScrollView, Pressable } from 'react-native'
|
||||
import { View, Text, StyleSheet, ScrollView, Pressable } from 'react-native'
|
||||
import { useRouter } from 'expo-router'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { Icon, type IconName } from '@/src/shared/components/Icon'
|
||||
|
||||
import { useMemo, useState, useEffect, useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useHaptics } from '@/src/shared/hooks'
|
||||
import { useUserStore, useActivityStore, getWeeklyActivity } from '@/src/shared/stores'
|
||||
import { useWorkoutProgramStore } from '@/src/shared/stores'
|
||||
import { StyledText } from '@/src/shared/components/StyledText'
|
||||
|
||||
import { Icon } from '@/src/shared/components/Icon'
|
||||
import { Mascot } from '@/src/shared/components/Mascot'
|
||||
|
||||
import { useThemeColors } from '@/src/shared/theme'
|
||||
import { BRAND, GREEN, TEXT, NAVY, BORDER_COLORS } from '@/src/shared/constants/colors'
|
||||
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
|
||||
import { useUserStore } from '@/src/shared/stores/userStore'
|
||||
import { useProgressStore } from '@/src/shared/stores/progressStore'
|
||||
import { BODY_ZONE_META, type BodyZone } from '@/src/shared/types/workoutProgram'
|
||||
import { TYPOGRAPHY } from '@/src/shared/constants/typography'
|
||||
import { SPACING } from '@/src/shared/constants/spacing'
|
||||
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
||||
import { fetchAllPrograms, buildWorkoutProgramId } from '@/src/shared/data/workoutPrograms'
|
||||
import type { WorkoutProgram, BodyZone } from '@/src/shared/types/workoutProgram'
|
||||
import { BODY_ZONE_META } from '@/src/shared/types/workoutProgram'
|
||||
import { TEXT, NAVY, GREEN, BORDER_COLORS } from '@/src/shared/constants/colors'
|
||||
import { withOpacity } from '@/src/shared/utils/color'
|
||||
|
||||
// Feature flags — disable incomplete features
|
||||
const FEATURE_FLAGS = {
|
||||
ASSESSMENT_ENABLED: false, // Assessment player not yet implemented
|
||||
}
|
||||
|
||||
/** Body zone order for display */
|
||||
const BODY_ZONE_ORDER: BodyZone[] = ['upper-body', 'lower-body', 'full-body']
|
||||
|
||||
const AnimatedPressable = Pressable
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// BODY ZONE CARD (clickable, navigates to detail)
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function BodyZoneCard({
|
||||
bodyZone,
|
||||
programCount,
|
||||
}: {
|
||||
bodyZone: BodyZone
|
||||
programCount: number
|
||||
}) {
|
||||
const router = useRouter()
|
||||
const haptics = useHaptics()
|
||||
const colors = useThemeColors()
|
||||
const meta = BODY_ZONE_META[bodyZone]
|
||||
|
||||
const handlePress = () => {
|
||||
haptics.buttonTap()
|
||||
router.push(`/workout/body-zone/${bodyZone}` as any)
|
||||
}
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
onPress={handlePress}
|
||||
style={({ pressed }) => [
|
||||
styles.bodyZoneCard,
|
||||
{
|
||||
backgroundColor: colors.surface.default.backgroundColor,
|
||||
borderColor: colors.border.dim,
|
||||
opacity: pressed ? 0.85 : 1,
|
||||
},
|
||||
]}
|
||||
testID={`zone-card-${bodyZone}`}
|
||||
>
|
||||
<View style={styles.bodyZoneCardInner}>
|
||||
<View style={[styles.bodyZoneCardIcon, { borderColor: meta.color }]}>
|
||||
<Icon name={meta.icon as IconName} size={20} tintColor={meta.color} />
|
||||
</View>
|
||||
<View style={styles.bodyZoneCardInfo}>
|
||||
<StyledText preset="TITLE_3" color={colors.text.primary}>
|
||||
{meta.label}
|
||||
</StyledText>
|
||||
<StyledText size={13} color={colors.text.tertiary} style={{ marginTop: SPACING[1] }}>
|
||||
{programCount} programme{programCount !== 1 ? 's' : ''}
|
||||
</StyledText>
|
||||
</View>
|
||||
<Icon name="chevron.right" size={18} tintColor={colors.text.tertiary} />
|
||||
</View>
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// CONTINUE SESSION CARD — adapted for workout programs
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function ContinueSessionCard({ programs }: { programs: WorkoutProgram[] }) {
|
||||
const { t } = useTranslation('screens')
|
||||
const router = useRouter()
|
||||
const haptics = useHaptics()
|
||||
const colors = useThemeColors()
|
||||
|
||||
const recommended = useWorkoutProgramStore(
|
||||
useCallback((s) => s.getRecommendedNext(programs), [programs])
|
||||
)
|
||||
|
||||
if (!recommended) return null
|
||||
|
||||
const zoneMeta = BODY_ZONE_META[recommended.bodyZone]
|
||||
const accentColor = recommended.accentColor ?? zoneMeta.color
|
||||
|
||||
const handlePress = () => {
|
||||
haptics.buttonTap()
|
||||
router.push(`/workout/${buildWorkoutProgramId(recommended.id)}` as any)
|
||||
}
|
||||
|
||||
return (
|
||||
<Pressable style={[styles.continueCard, { borderColor: colors.border.dim }]} onPress={handlePress} testID="continue-session-card">
|
||||
<View style={[styles.continueAccentLine, { backgroundColor: accentColor }]} />
|
||||
<View style={styles.continueContent}>
|
||||
<View style={styles.continueHeader}>
|
||||
<Icon name="play.circle" size={20} tintColor={accentColor} />
|
||||
<StyledText preset="CALLOUT" weight="semibold" color={colors.text.primary} style={{ flex: 1, marginLeft: SPACING[2] }}>
|
||||
{t('home.recommendedNext')}
|
||||
</StyledText>
|
||||
</View>
|
||||
<StyledText preset="HEADLINE" color={colors.text.primary}>
|
||||
{recommended.title}
|
||||
</StyledText>
|
||||
<StyledText size={13} color={colors.text.tertiary} style={{ marginTop: SPACING[1] }}>
|
||||
{zoneMeta.label} · {recommended.estimatedDuration} min · ~{recommended.estimatedCalories} kcal
|
||||
</StyledText>
|
||||
</View>
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// QUICK STATS ROW
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function QuickStats() {
|
||||
const { t } = useTranslation('screens')
|
||||
const colors = useThemeColors()
|
||||
const streak = useActivityStore((s) => s.streak)
|
||||
const history = useActivityStore((s) => s.history)
|
||||
const weeklyActivity = useMemo(() => getWeeklyActivity(history), [history])
|
||||
const thisWeekCount = weeklyActivity.filter((d) => d.completed).length
|
||||
const totalMinutes = useMemo(() => history.reduce((sum, r) => sum + r.durationMinutes, 0), [history])
|
||||
|
||||
const stats = [
|
||||
{ icon: 'flame.fill' as const, value: streak.current, label: t('home.statsStreak'), color: GREEN['500'] },
|
||||
{ icon: 'calendar' as const, value: `${thisWeekCount}/7`, label: t('home.statsThisWeek'), color: BRAND.INFO },
|
||||
{ icon: 'clock' as const, value: totalMinutes, label: t('home.statsMinutes'), color: GREEN['500'] },
|
||||
]
|
||||
|
||||
return (
|
||||
<View style={styles.quickStatsRow}>
|
||||
{stats.map((stat) => (
|
||||
<View key={stat.label} style={styles.quickStatPill}>
|
||||
<Icon name={stat.icon} size={16} tintColor={stat.color} />
|
||||
<StyledText size={17} weight="bold" color={colors.text.primary} style={{ fontVariant: ['tabular-nums'] }}>
|
||||
{String(stat.value)}
|
||||
</StyledText>
|
||||
<StyledText size={11} color={colors.text.tertiary}>
|
||||
{stat.label}
|
||||
</StyledText>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// KINE LINK CARD (bottom link to physio programs)
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function TabataLinkCard() {
|
||||
const { t } = useTranslation('screens')
|
||||
const router = useRouter()
|
||||
const haptics = useHaptics()
|
||||
const colors = useThemeColors()
|
||||
|
||||
const handlePress = () => {
|
||||
haptics.buttonTap()
|
||||
router.push('/program/debutant' as any)
|
||||
}
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
onPress={handlePress}
|
||||
style={({ pressed }) => [
|
||||
styles.tabataLinkCard,
|
||||
{
|
||||
backgroundColor: colors.surface.default.backgroundColor,
|
||||
borderColor: colors.border.dim,
|
||||
opacity: pressed ? 0.85 : 1,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<View style={styles.tabataLinkLeft}>
|
||||
<View style={[styles.tabataLinkIcon, { backgroundColor: GREEN.DIM }]}>
|
||||
<Icon name="heart.text.square" size={22} tintColor={GREEN['500']} />
|
||||
</View>
|
||||
<View style={styles.tabataLinkText}>
|
||||
<StyledText preset="HEADLINE" color={colors.text.primary}>
|
||||
{t('home.tabataPrograms')}
|
||||
</StyledText>
|
||||
<StyledText size={13} color={colors.text.tertiary} style={{ marginTop: SPACING[1] }}>
|
||||
{t('home.tabataProgramsSubtitle')}
|
||||
</StyledText>
|
||||
</View>
|
||||
</View>
|
||||
<Icon name="chevron.right" size={18} tintColor={colors.text.tertiary} />
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// MAIN SCREEN
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
const BODY_ZONES: BodyZone[] = ['upper-body', 'lower-body', 'full-body']
|
||||
|
||||
export default function HomeScreen() {
|
||||
const { t } = useTranslation('screens')
|
||||
const insets = useSafeAreaInsets()
|
||||
const router = useRouter()
|
||||
const colors = useThemeColors()
|
||||
const userName = useUserStore((s) => s.profile.name)
|
||||
const streak = useActivityStore((s) => s.streak)
|
||||
// Fetch workout programs
|
||||
const [programs, setPrograms] = useState<WorkoutProgram[]>([])
|
||||
const insets = useSafeAreaInsets()
|
||||
const { t } = useTranslation()
|
||||
|
||||
useEffect(() => {
|
||||
fetchAllPrograms().then(setPrograms)
|
||||
}, [])
|
||||
const firstName = useUserStore(s => s.profile.name)
|
||||
const streak = useProgressStore(s => s.streak.current)
|
||||
const weeklyCount = useProgressStore(s => s.getWeeklyCount())
|
||||
const completedCount = useProgressStore(s => s.getCompletedCount())
|
||||
|
||||
// Group programs by body zone
|
||||
const programsByZone = useMemo(() => {
|
||||
const grouped: Record<BodyZone, WorkoutProgram[]> = {
|
||||
'upper-body': [],
|
||||
'lower-body': [],
|
||||
'full-body': [],
|
||||
}
|
||||
for (const program of programs) {
|
||||
if (grouped[program.bodyZone]) {
|
||||
grouped[program.bodyZone].push(program)
|
||||
}
|
||||
}
|
||||
return grouped
|
||||
}, [programs])
|
||||
|
||||
const greeting = (() => {
|
||||
const hour = new Date().getHours()
|
||||
if (hour < 12) return t('common:greetings.morning')
|
||||
if (hour < 18) return t('common:greetings.afternoon')
|
||||
return t('common:greetings.evening')
|
||||
})()
|
||||
const nameSuffix = firstName ? `, ${firstName}` : ''
|
||||
const mascotMessage = streak > 0
|
||||
? t('screens:home.mascotStreak', { count: streak, name: nameSuffix })
|
||||
: t('screens:home.mascotReady', { name: nameSuffix })
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 20 }]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Hero Section */}
|
||||
<View style={styles.heroSection}>
|
||||
<View style={styles.heroRow}>
|
||||
<View style={styles.heroTextContent}>
|
||||
<View style={styles.heroGreetingRow}>
|
||||
<StyledText preset="CALLOUT" color={colors.text.tertiary}>
|
||||
{greeting}
|
||||
</StyledText>
|
||||
{/* Inline streak badge */}
|
||||
{streak.current > 0 && (
|
||||
<View style={styles.streakBadge}>
|
||||
<Icon name="flame.fill" size={13} tintColor={GREEN['500']} />
|
||||
<StyledText size={12} weight="bold" color={GREEN['500']} style={{ fontVariant: ['tabular-nums'] }}>
|
||||
{streak.current}
|
||||
</StyledText>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<StyledText preset="LARGE_TITLE" color={colors.text.primary} style={styles.heroName}>
|
||||
{userName}
|
||||
</StyledText>
|
||||
<StyledText preset="FOOTNOTE" color={colors.text.secondary} style={styles.heroSubtitle}>
|
||||
{t('home.programsByZone')}
|
||||
</StyledText>
|
||||
</View>
|
||||
<Mascot size={90} style={{ marginLeft: SPACING[3], marginTop: -15 }} />
|
||||
</View>
|
||||
</View>
|
||||
<ScrollView
|
||||
style={styles.container}
|
||||
contentContainerStyle={[styles.content, { paddingTop: insets.top + SPACING[4], paddingBottom: insets.bottom + SPACING[6] }]}
|
||||
>
|
||||
{/* Header with settings */}
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.brand}>TabataGo</Text>
|
||||
<Pressable onPress={() => router.push('/settings')} style={styles.iconBtn} hitSlop={8}>
|
||||
<Icon name="gearshape" size={22} tintColor={TEXT.PRIMARY} />
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
{/* Quick Stats Row */}
|
||||
<QuickStats />
|
||||
{/* Mascot */}
|
||||
<View style={styles.mascotWrap}>
|
||||
<Mascot message={mascotMessage} />
|
||||
</View>
|
||||
|
||||
{/* Continue Session (if in progress) */}
|
||||
<ContinueSessionCard programs={programs} />
|
||||
{/* Stats pills */}
|
||||
<View style={styles.statsRow}>
|
||||
<StatPill value={streak} label={t('screens:home.statsStreak')} icon="flame.fill" color="#FF6B35" />
|
||||
<StatPill value={weeklyCount} label={t('screens:home.statsThisWeek')} icon="calendar" color={GREEN[500]} />
|
||||
<StatPill value={completedCount} label={t('screens:home.statsCompleted')} icon="checkmark.seal.fill" color="#5AC8FA" />
|
||||
</View>
|
||||
|
||||
{/* Body Zone Cards */}
|
||||
{BODY_ZONE_ORDER.map((zone) => (
|
||||
<BodyZoneCard
|
||||
key={zone}
|
||||
bodyZone={zone}
|
||||
programCount={programsByZone[zone].length}
|
||||
/>
|
||||
{/* Body zone cards */}
|
||||
<Text style={styles.sectionTitle}>{t('screens:zone.chooseYourFocus')}</Text>
|
||||
<View style={styles.zoneList}>
|
||||
{BODY_ZONES.map(zone => (
|
||||
<ZoneCard key={zone} zone={zone} onPress={() => router.push(`/zone/${zone}`)} />
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
)
|
||||
}
|
||||
|
||||
{/* Tabata Programs Link */}
|
||||
<TabataLinkCard />
|
||||
</ScrollView>
|
||||
function StatPill({
|
||||
value,
|
||||
label,
|
||||
icon,
|
||||
color,
|
||||
}: {
|
||||
value: number
|
||||
label: string
|
||||
icon: any
|
||||
color: string
|
||||
}) {
|
||||
return (
|
||||
<View style={[styles.pill, { borderColor: withOpacity(color, 0.4) }]}>
|
||||
<Icon name={icon} size={16} tintColor={color} />
|
||||
<Text style={styles.pillValue}>{value}</Text>
|
||||
<Text style={styles.pillLabel}>{label}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// STYLES
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
function ZoneCard({ zone, onPress }: { zone: BodyZone; onPress: () => void }) {
|
||||
const meta = BODY_ZONE_META[zone]
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<Pressable
|
||||
onPress={onPress}
|
||||
style={({ pressed }) => [
|
||||
styles.zoneCard,
|
||||
{ borderColor: withOpacity(meta.color, 0.3) },
|
||||
pressed && { opacity: 0.85, transform: [{ scale: 0.98 }] },
|
||||
]}
|
||||
>
|
||||
{/* Colored top strip with large icon */}
|
||||
<View style={[styles.zoneTopStrip, { backgroundColor: withOpacity(meta.color, 0.12) }]}>
|
||||
<View style={[styles.zoneIconCircle, { backgroundColor: withOpacity(meta.color, 0.22) }]}>
|
||||
<Icon name={meta.icon as any} size={34} tintColor={meta.color} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Content area */}
|
||||
<View style={styles.zoneContent}>
|
||||
<Text style={styles.zoneTitle}>{meta.label}</Text>
|
||||
<Text style={styles.zoneDesc} numberOfLines={2}>
|
||||
{t(meta.descKey)}
|
||||
</Text>
|
||||
|
||||
{/* Bottom row: level badge + chevron */}
|
||||
<View style={styles.zoneFooter}>
|
||||
<View style={[styles.zoneBadge, { backgroundColor: withOpacity(meta.color, 0.15) }]}>
|
||||
<Text style={[styles.zoneBadgeText, { color: meta.color }]}>
|
||||
{t('screens:home.zoneLevels')}
|
||||
</Text>
|
||||
</View>
|
||||
<Icon name="chevron.right" size={16} tintColor={TEXT.TERTIARY} />
|
||||
</View>
|
||||
</View>
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: NAVY[900],
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
},
|
||||
container: { flex: 1, backgroundColor: NAVY[900] },
|
||||
content: { paddingHorizontal: SPACING[5] },
|
||||
|
||||
// Hero Section
|
||||
heroSection: {
|
||||
marginTop: SPACING[4],
|
||||
marginBottom: SPACING[7],
|
||||
},
|
||||
heroRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
heroTextContent: {
|
||||
flex: 1,
|
||||
},
|
||||
heroGreetingRow: {
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: SPACING[4],
|
||||
},
|
||||
streakBadge: {
|
||||
flexDirection: 'row',
|
||||
brand: { ...TYPOGRAPHY.TITLE_1, color: TEXT.PRIMARY, letterSpacing: -0.5 },
|
||||
iconBtn: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
alignItems: 'center',
|
||||
gap: SPACING[1],
|
||||
paddingHorizontal: SPACING[3],
|
||||
paddingVertical: SPACING[1],
|
||||
borderRadius: RADIUS.PILL,
|
||||
backgroundColor: GREEN.DIM,
|
||||
borderWidth: 1,
|
||||
borderColor: GREEN.BORDER,
|
||||
borderCurve: 'continuous',
|
||||
},
|
||||
heroName: {
|
||||
marginTop: SPACING[1],
|
||||
},
|
||||
heroSubtitle: {
|
||||
marginTop: SPACING[2],
|
||||
},
|
||||
|
||||
// Quick Stats Row
|
||||
quickStatsRow: {
|
||||
flexDirection: 'row',
|
||||
gap: SPACING[3],
|
||||
marginBottom: SPACING[7],
|
||||
},
|
||||
quickStatPill: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
paddingVertical: SPACING[4],
|
||||
borderRadius: RADIUS.LG,
|
||||
justifyContent: 'center',
|
||||
backgroundColor: NAVY[800],
|
||||
borderWidth: 1,
|
||||
borderColor: BORDER_COLORS.DIM,
|
||||
borderCurve: 'continuous',
|
||||
gap: SPACING[1],
|
||||
backgroundColor: NAVY[800],
|
||||
},
|
||||
|
||||
// Continue Session Card
|
||||
continueCard: {
|
||||
borderRadius: RADIUS.XL,
|
||||
marginBottom: SPACING[7],
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
borderCurve: 'continuous',
|
||||
backgroundColor: NAVY[800],
|
||||
},
|
||||
continueAccentLine: {
|
||||
height: 3,
|
||||
width: '100%',
|
||||
},
|
||||
continueContent: {
|
||||
padding: SPACING[5],
|
||||
},
|
||||
continueHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: SPACING[3],
|
||||
},
|
||||
mascotWrap: { alignItems: 'center', marginVertical: SPACING[4] },
|
||||
|
||||
// Body Zone Card
|
||||
bodyZoneCard: {
|
||||
statsRow: { flexDirection: 'row', gap: SPACING[2], marginBottom: SPACING[6] },
|
||||
pill: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
paddingVertical: SPACING[3],
|
||||
paddingHorizontal: SPACING[2],
|
||||
borderRadius: RADIUS.MD,
|
||||
borderWidth: 1,
|
||||
backgroundColor: NAVY[800],
|
||||
gap: 4,
|
||||
},
|
||||
pillValue: { ...TYPOGRAPHY.TITLE_2, color: TEXT.PRIMARY, fontVariant: ['tabular-nums'] },
|
||||
pillLabel: { ...TYPOGRAPHY.CAPTION_2, color: TEXT.TERTIARY, textAlign: 'center' },
|
||||
|
||||
sectionTitle: { ...TYPOGRAPHY.HEADLINE, color: TEXT.PRIMARY, marginBottom: SPACING[3] },
|
||||
zoneList: { gap: SPACING[4] },
|
||||
zoneCard: {
|
||||
borderRadius: RADIUS.XL,
|
||||
borderWidth: 1,
|
||||
borderCurve: 'continuous',
|
||||
marginBottom: SPACING[3],
|
||||
backgroundColor: NAVY[800],
|
||||
overflow: 'hidden' as const,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
|
||||
},
|
||||
bodyZoneCardInner: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
zoneTopStrip: {
|
||||
alignItems: 'center' as const,
|
||||
justifyContent: 'center' as const,
|
||||
paddingVertical: SPACING[5],
|
||||
},
|
||||
zoneIconCircle: {
|
||||
width: 72,
|
||||
height: 72,
|
||||
borderRadius: 36,
|
||||
alignItems: 'center' as const,
|
||||
justifyContent: 'center' as const,
|
||||
},
|
||||
zoneContent: {
|
||||
padding: SPACING[4],
|
||||
gap: SPACING[3],
|
||||
gap: SPACING[2],
|
||||
},
|
||||
bodyZoneCardIcon: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: RADIUS.FULL,
|
||||
borderWidth: 1.5,
|
||||
borderCurve: 'continuous',
|
||||
backgroundColor: NAVY[800],
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zoneTitle: { ...TYPOGRAPHY.TITLE_2, color: TEXT.PRIMARY },
|
||||
zoneDesc: { ...TYPOGRAPHY.SUBHEADLINE, color: TEXT.SECONDARY, lineHeight: 20 },
|
||||
zoneFooter: {
|
||||
flexDirection: 'row' as const,
|
||||
alignItems: 'center' as const,
|
||||
justifyContent: 'space-between' as const,
|
||||
marginTop: SPACING[1],
|
||||
},
|
||||
bodyZoneCardInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
|
||||
// Tabata Link Card
|
||||
tabataLinkCard: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: SPACING[4],
|
||||
borderRadius: RADIUS.XL,
|
||||
borderWidth: 1,
|
||||
borderCurve: 'continuous',
|
||||
marginBottom: SPACING[6],
|
||||
},
|
||||
tabataLinkLeft: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
gap: SPACING[3],
|
||||
},
|
||||
tabataLinkIcon: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: RADIUS.LG,
|
||||
borderCurve: 'continuous',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
tabataLinkText: {
|
||||
flex: 1,
|
||||
zoneBadge: {
|
||||
paddingHorizontal: SPACING[3],
|
||||
paddingVertical: SPACING[1],
|
||||
borderRadius: RADIUS.SM,
|
||||
},
|
||||
zoneBadgeText: { ...TYPOGRAPHY.CAPTION_1, fontWeight: '600' as const },
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user