85 lines
2.0 KiB
TypeScript
85 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { View, StyleSheet, SafeAreaView, TouchableOpacity, StatusBar } from 'react-native';
|
|
import { OnboardingColors } from '@/constants/OnboardingTheme';
|
|
import { SerifText } from './SerifText';
|
|
import { NextButton } from './NextButton';
|
|
|
|
interface OnboardingLayoutProps {
|
|
children: React.ReactNode;
|
|
onSkip?: () => void;
|
|
onNext?: () => void;
|
|
nextEnabled?: boolean;
|
|
showNextButton?: boolean;
|
|
}
|
|
|
|
export function OnboardingLayout({
|
|
children,
|
|
onSkip,
|
|
onNext,
|
|
nextEnabled = true,
|
|
showNextButton = true
|
|
}: OnboardingLayoutProps) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<StatusBar barStyle="dark-content" />
|
|
<SafeAreaView style={styles.safeArea}>
|
|
<View style={styles.header}>
|
|
<View style={styles.spacer} />
|
|
{onSkip && (
|
|
<TouchableOpacity onPress={onSkip} style={styles.skipButton}>
|
|
<SerifText style={styles.skipText}>Skip {'->'}</SerifText>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
|
|
<View style={styles.content}>
|
|
{children}
|
|
</View>
|
|
|
|
<View style={styles.footer}>
|
|
{showNextButton && onNext && (
|
|
<NextButton onPress={onNext} disabled={!nextEnabled} />
|
|
)}
|
|
</View>
|
|
</SafeAreaView>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: OnboardingColors.background,
|
|
},
|
|
safeArea: {
|
|
flex: 1,
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 24,
|
|
paddingVertical: 12,
|
|
},
|
|
spacer: {
|
|
width: 60, // Balance the skip button width approximately
|
|
},
|
|
skipButton: {
|
|
padding: 8,
|
|
},
|
|
skipText: {
|
|
fontSize: 16,
|
|
color: OnboardingColors.textPrimary,
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
paddingHorizontal: 24,
|
|
},
|
|
footer: {
|
|
alignItems: 'center',
|
|
paddingBottom: 40,
|
|
minHeight: 100, // Reserve space for button
|
|
},
|
|
});
|