mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import React from 'react'
2import {Pressable, View} from 'react-native'
3import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
4import {msg, Trans} from '@lingui/macro'
5import {useLingui} from '@lingui/react'
6
7import {useKawaiiMode} from '#/state/preferences/kawaii'
8import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
9import {Logo} from '#/view/icons/Logo'
10import {Logotype} from '#/view/icons/Logotype'
11import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
12import {atoms as a, useTheme} from '#/alf'
13import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
14import {Button, ButtonText} from '#/components/Button'
15import {InlineLinkText} from '#/components/Link'
16import {Text} from '#/components/Typography'
17import {CenteredView} from '../util/Views'
18
19export const SplashScreen = ({
20 onDismiss,
21 onPressSignin,
22 onPressCreateAccount,
23}: {
24 onDismiss?: () => void
25 onPressSignin: () => void
26 onPressCreateAccount: () => void
27}) => {
28 const {_} = useLingui()
29 const t = useTheme()
30 const {isTabletOrMobile: isMobileWeb} = useWebMediaQueries()
31
32 const kawaii = useKawaiiMode()
33
34 return (
35 <>
36 {onDismiss && (
37 <Pressable
38 accessibilityRole="button"
39 style={{
40 position: 'absolute',
41 top: 20,
42 right: 20,
43 padding: 20,
44 zIndex: 100,
45 }}
46 onPress={onDismiss}>
47 <FontAwesomeIcon
48 icon="x"
49 size={24}
50 style={{
51 color: String(t.atoms.text.color),
52 }}
53 />
54 </Pressable>
55 )}
56
57 <CenteredView style={[a.h_full, a.flex_1]}>
58 <View
59 testID="noSessionView"
60 style={[
61 a.h_full,
62 a.justify_center,
63 // @ts-ignore web only
64 {paddingBottom: '20vh'},
65 isMobileWeb && a.pb_5xl,
66 t.atoms.border_contrast_medium,
67 a.align_center,
68 a.gap_5xl,
69 ]}>
70 <ErrorBoundary>
71 <View style={[a.justify_center, a.align_center]}>
72 <Logo width={kawaii ? 300 : 92} fill="sky" />
73
74 {!kawaii && (
75 <View style={[a.pb_sm, a.pt_5xl]}>
76 <Logotype width={161} fill={t.atoms.text.color} />
77 </View>
78 )}
79
80 <Text
81 style={[
82 a.text_md,
83 a.font_semibold,
84 t.atoms.text_contrast_medium,
85 ]}>
86 <Trans>What's up?</Trans>
87 </Text>
88 </View>
89
90 <View
91 testID="signinOrCreateAccount"
92 style={[a.w_full, {maxWidth: 320}]}>
93 <Button
94 testID="createAccountButton"
95 onPress={onPressCreateAccount}
96 accessibilityRole="button"
97 label={_(msg`Create new account`)}
98 accessibilityHint={_(
99 msg`Opens flow to create a new Bluesky account`,
100 )}
101 style={[a.mx_xl, a.mb_xl]}
102 size="large"
103 variant="solid"
104 color="primary">
105 <ButtonText>
106 <Trans>Create a new account</Trans>
107 </ButtonText>
108 </Button>
109 <Button
110 testID="signInButton"
111 onPress={onPressSignin}
112 label={_(msg`Sign in`)}
113 accessibilityHint={_(
114 msg`Opens flow to sign into your existing Bluesky account`,
115 )}
116 style={[a.mx_xl, a.mb_xl]}
117 size="large"
118 variant="solid"
119 color="secondary">
120 <ButtonText>
121 <Trans>Sign in</Trans>
122 </ButtonText>
123 </Button>
124 </View>
125 </ErrorBoundary>
126 </View>
127 <Footer />
128 </CenteredView>
129 </>
130 )
131}
132
133function Footer() {
134 const t = useTheme()
135 const {_} = useLingui()
136
137 return (
138 <View
139 style={[
140 a.absolute,
141 a.inset_0,
142 {top: 'auto'},
143 a.p_xl,
144 a.border_t,
145 a.flex_row,
146 a.flex_wrap,
147 a.gap_xl,
148 a.flex_1,
149 t.atoms.border_contrast_medium,
150 ]}>
151 <InlineLinkText
152 label={_(msg`Learn more about Bluesky`)}
153 to="https://bsky.social">
154 <Trans>Business</Trans>
155 </InlineLinkText>
156 <InlineLinkText
157 label={_(msg`Read the Bluesky blog`)}
158 to="https://bsky.social/about/blog">
159 <Trans>Blog</Trans>
160 </InlineLinkText>
161 <InlineLinkText
162 label={_(msg`See jobs at Bluesky`)}
163 to="https://bsky.social/about/join">
164 <Trans>Jobs</Trans>
165 </InlineLinkText>
166
167 <View style={a.flex_1} />
168
169 <AppLanguageDropdown />
170 </View>
171 )
172}