95f70a9a6a
* Add optional sms verification * Add support link to account creation * Add e2e tests * Bump api@0.9.0 * Update lockfile * Bump api@0.9.1 * Include the phone number in the ui * Add phone number validation and normalization
44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import React from 'react'
|
|
import {StyleSheet, View} from 'react-native'
|
|
import {Text} from 'view/com/util/text/Text'
|
|
import {usePalette} from 'lib/hooks/usePalette'
|
|
import {Trans} from '@lingui/macro'
|
|
import {CreateAccountState} from './state'
|
|
|
|
export function StepHeader({
|
|
uiState,
|
|
title,
|
|
children,
|
|
}: React.PropsWithChildren<{uiState: CreateAccountState; title: string}>) {
|
|
const pal = usePalette('default')
|
|
const numSteps = uiState.isPhoneVerificationRequired ? 3 : 2
|
|
return (
|
|
<View style={styles.container}>
|
|
<View>
|
|
<Text type="lg" style={[pal.textLight]}>
|
|
{uiState.step === 3 ? (
|
|
<Trans>Last step!</Trans>
|
|
) : (
|
|
<Trans>
|
|
Step {uiState.step} of {numSteps}
|
|
</Trans>
|
|
)}
|
|
</Text>
|
|
|
|
<Text style={[pal.text]} type="title-xl">
|
|
{title}
|
|
</Text>
|
|
</View>
|
|
{children}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: 20,
|
|
},
|
|
})
|