forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {View} from 'react-native'
2import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
3import {useSafeAreaInsets} from 'react-native-safe-area-context'
4import {msg, Trans} from '@lingui/macro'
5import {useLingui} from '@lingui/react'
6
7import {useHaptics} from '#/lib/haptics'
8import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
9import {CenteredView} from '#/view/com/util/Views'
10import {Logo} from '#/view/icons/Logo'
11import {Logotype} from '#/view/icons/Logotype'
12import {atoms as a, useTheme} from '#/alf'
13import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
14import {Button, ButtonText} from '#/components/Button'
15import {Text} from '#/components/Typography'
16
17export const SplashScreen = ({
18 onPressSignin,
19 onPressCreateAccount,
20}: {
21 onPressSignin: () => void
22 onPressCreateAccount: () => void
23}) => {
24 const t = useTheme()
25 const {_} = useLingui()
26
27 const playHaptic = useHaptics()
28 const insets = useSafeAreaInsets()
29
30 return (
31 <CenteredView style={[a.h_full, a.flex_1]}>
32 <Animated.View
33 entering={FadeIn.duration(90)}
34 exiting={FadeOut.duration(90)}
35 style={[a.flex_1]}>
36 <ErrorBoundary>
37 <View style={[a.flex_1, a.justify_center, a.align_center]}>
38 <Logo width={92} fill="sky" />
39
40 <View style={[a.pb_sm, a.pt_5xl]}>
41 <Logotype width={161} fill={t.atoms.text.color} />
42 </View>
43
44 <Text
45 style={[
46 a.text_md,
47 a.font_semi_bold,
48 t.atoms.text_contrast_medium,
49 a.text_center,
50 ]}>
51 <Trans>What's up?</Trans>
52 </Text>
53 </View>
54
55 <View
56 testID="signinOrCreateAccount"
57 style={[a.px_xl, a.gap_md, a.pb_2xl]}>
58 <Button
59 testID="createAccountButton"
60 onPress={() => {
61 onPressCreateAccount()
62 playHaptic('Light')
63 }}
64 label={_(msg`Create new account`)}
65 accessibilityHint={_(
66 msg`Opens flow to create a new Bluesky account`,
67 )}
68 size="large"
69 variant="solid"
70 color="primary">
71 <ButtonText>
72 <Trans>Create account</Trans>
73 </ButtonText>
74 </Button>
75 <Button
76 testID="signInButton"
77 onPress={() => {
78 onPressSignin()
79 playHaptic('Light')
80 }}
81 label={_(msg`Sign in`)}
82 accessibilityHint={_(
83 msg`Opens flow to sign in to your existing Bluesky account`,
84 )}
85 size="large"
86 variant="solid"
87 color="secondary">
88 <ButtonText>
89 <Trans>Sign in</Trans>
90 </ButtonText>
91 </Button>
92 </View>
93 <View
94 style={[
95 a.px_lg,
96 a.pt_md,
97 a.pb_2xl,
98 a.justify_center,
99 a.align_center,
100 ]}>
101 <View>
102 <AppLanguageDropdown />
103 </View>
104 </View>
105 <View style={{height: insets.bottom}} />
106 </ErrorBoundary>
107 </Animated.View>
108 </CenteredView>
109 )
110}