ansxor.ca
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
xan.lol
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 {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
8import {useKawaiiMode} from '#/state/preferences/kawaii'
9import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
10import {Logo} from '#/view/icons/Logo'
11import {Logotype} from '#/view/icons/Logotype'
12import {
13 AppClipOverlay,
14 postAppClipMessage,
15} from '#/screens/StarterPack/StarterPackLandingScreen'
16import {atoms as a, useTheme} from '#/alf'
17import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
18import {Button, ButtonText} from '#/components/Button'
19import * as Layout from '#/components/Layout'
20import {InlineLinkText} from '#/components/Link'
21import {Text} from '#/components/Typography'
22
23export const SplashScreen = ({
24 onDismiss,
25 onPressSignin,
26 onPressCreateAccount,
27}: {
28 onDismiss?: () => void
29 onPressSignin: () => void
30 onPressCreateAccount: () => void
31}) => {
32 const {_} = useLingui()
33 const t = useTheme()
34 const {isTabletOrMobile: IS_WEB_MOBILE} = useWebMediaQueries()
35 const [showClipOverlay, setShowClipOverlay] = React.useState(false)
36
37 React.useEffect(() => {
38 const getParams = new URLSearchParams(window.location.search)
39 const clip = getParams.get('clip')
40 if (clip === 'true') {
41 setShowClipOverlay(true)
42 postAppClipMessage({
43 action: 'present',
44 })
45 }
46 }, [])
47
48 const kawaii = useKawaiiMode()
49
50 return (
51 <>
52 {onDismiss && (
53 <Pressable
54 accessibilityRole="button"
55 style={{
56 position: 'absolute',
57 top: 20,
58 right: 20,
59 padding: 20,
60 zIndex: 100,
61 }}
62 onPress={onDismiss}>
63 <FontAwesomeIcon
64 icon="x"
65 size={24}
66 style={{
67 color: String(t.atoms.text.color),
68 }}
69 />
70 </Pressable>
71 )}
72
73 <Layout.Center style={[a.h_full, a.flex_1]} ignoreTabletLayoutOffset>
74 <View
75 testID="noSessionView"
76 style={[
77 a.h_full,
78 a.justify_center,
79 // @ts-expect-error web only
80 {paddingBottom: '20vh'},
81 IS_WEB_MOBILE && a.pb_5xl,
82 t.atoms.border_contrast_medium,
83 a.align_center,
84 a.gap_5xl,
85 a.flex_1,
86 ]}>
87 <ErrorBoundary>
88 <View style={[a.justify_center, a.align_center]}>
89 <Logo width={kawaii ? 300 : 92} fill="sky" />
90
91 {!kawaii && (
92 <View style={[a.pb_sm, a.pt_5xl]}>
93 <Logotype width={161} fill={t.atoms.text.color} />
94 </View>
95 )}
96
97 <Text
98 style={[
99 a.text_md,
100 a.font_semi_bold,
101 t.atoms.text_contrast_medium,
102 ]}>
103 <Trans>Skeet yo shit! 🗣️</Trans>
104 </Text>
105 </View>
106
107 <View
108 testID="signinOrCreateAccount"
109 style={[a.w_full, a.px_xl, a.gap_md, a.pb_2xl, {maxWidth: 320}]}>
110 <Button
111 testID="createAccountButton"
112 onPress={onPressCreateAccount}
113 label={_(msg`Create new account`)}
114 accessibilityHint={_(
115 msg`Opens flow to create a new Bluesky account`,
116 )}
117 size="large"
118 variant="solid"
119 color="primary">
120 <ButtonText>
121 <Trans>Create account</Trans>
122 </ButtonText>
123 </Button>
124 <Button
125 testID="signInButton"
126 onPress={onPressSignin}
127 label={_(msg`Sign in`)}
128 accessibilityHint={_(
129 msg`Opens flow to sign in to your existing Bluesky account`,
130 )}
131 size="large"
132 variant="solid"
133 color="secondary">
134 <ButtonText>
135 <Trans>Sign in</Trans>
136 </ButtonText>
137 </Button>
138 </View>
139 </ErrorBoundary>
140 </View>
141 <Footer />
142 </Layout.Center>
143 <AppClipOverlay
144 visible={showClipOverlay}
145 setIsVisible={setShowClipOverlay}
146 />
147 </>
148 )
149}
150
151function Footer() {
152 const t = useTheme()
153 const {_} = useLingui()
154
155 return (
156 <View
157 style={[
158 a.absolute,
159 a.inset_0,
160 {top: 'auto'},
161 a.px_xl,
162 a.py_lg,
163 a.border_t,
164 a.flex_row,
165 a.align_center,
166 a.flex_wrap,
167 a.gap_xl,
168 a.flex_1,
169 t.atoms.border_contrast_medium,
170 ]}>
171 <InlineLinkText
172 label={_(msg`Read the patches and contribute`)}
173 to="https://tangled.org/jollywhoppers.com/witchsky.app/">
174 <Trans>Tangled</Trans>
175 </InlineLinkText>
176
177 <View style={a.flex_1} />
178
179 <AppLanguageDropdown />
180 </View>
181 )
182}