src/view/com/auth/create/StepHeader.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

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,
  },
})