forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {ScrollView, StyleSheet, View} from 'react-native'
2
3import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
4import {useIsKeyboardVisible} from '#/lib/hooks/useIsKeyboardVisible'
5import {usePalette} from '#/lib/hooks/usePalette'
6import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
7import {atoms as a} from '#/alf'
8import {IS_WEB} from '#/env'
9import {Text} from '../text/Text'
10
11export const LoggedOutLayout = ({
12 leadin,
13 title,
14 description,
15 children,
16 scrollable,
17}: React.PropsWithChildren<{
18 leadin: string
19 title: string
20 description: string
21 scrollable?: boolean
22}>) => {
23 const {isMobile, isTabletOrMobile} = useWebMediaQueries()
24 const pal = usePalette('default')
25 const sideBg = useColorSchemeStyle(pal.viewLight, pal.view)
26 const contentBg = useColorSchemeStyle(pal.view, {
27 backgroundColor: pal.colors.background,
28 borderColor: pal.colors.border,
29 borderLeftWidth: 1,
30 })
31
32 const [isKeyboardVisible] = useIsKeyboardVisible()
33
34 if (isMobile) {
35 if (scrollable) {
36 return (
37 <ScrollView
38 style={a.flex_1}
39 keyboardShouldPersistTaps="handled"
40 keyboardDismissMode="none"
41 contentContainerStyle={[
42 {paddingBottom: isKeyboardVisible ? 300 : 0},
43 ]}>
44 <View style={a.pt_lg}>{children}</View>
45 </ScrollView>
46 )
47 } else {
48 return <View style={a.pt_lg}>{children}</View>
49 }
50 }
51 return (
52 <View style={styles.container}>
53 <View style={[styles.side, sideBg]}>
54 <Text
55 style={[
56 pal.textLight,
57 styles.leadinText,
58 isTabletOrMobile && styles.leadinTextSmall,
59 ]}>
60 {leadin}
61 </Text>
62 <Text
63 style={[
64 pal.link,
65 styles.titleText,
66 isTabletOrMobile && styles.titleTextSmall,
67 ]}>
68 {title}
69 </Text>
70 <Text type="2xl-medium" style={[pal.textLight, styles.descriptionText]}>
71 {description}
72 </Text>
73 </View>
74 {scrollable ? (
75 <View style={[styles.scrollableContent, contentBg]}>
76 <ScrollView
77 style={a.flex_1}
78 contentContainerStyle={styles.scrollViewContentContainer}
79 keyboardShouldPersistTaps="handled"
80 keyboardDismissMode="on-drag">
81 <View style={[styles.contentWrapper, IS_WEB && a.my_auto]}>
82 {children}
83 </View>
84 </ScrollView>
85 </View>
86 ) : (
87 <View style={[styles.content, contentBg]}>
88 <View style={styles.contentWrapper}>{children}</View>
89 </View>
90 )}
91 </View>
92 )
93}
94
95const styles = StyleSheet.create({
96 container: {
97 flexDirection: 'row',
98 // @ts-ignore web only
99 height: '100vh',
100 },
101 side: {
102 flex: 1,
103 paddingHorizontal: 40,
104 paddingBottom: 80,
105 justifyContent: 'center',
106 },
107 content: {
108 flex: 2,
109 paddingHorizontal: 40,
110 justifyContent: 'center',
111 },
112 scrollableContent: {
113 flex: 2,
114 },
115 scrollViewContentContainer: {
116 flex: 1,
117 paddingHorizontal: 40,
118 },
119 leadinText: {
120 fontSize: 36,
121 fontWeight: '800',
122 textAlign: 'right',
123 },
124 leadinTextSmall: {
125 fontSize: 24,
126 },
127 titleText: {
128 fontSize: 58,
129 fontWeight: '800',
130 textAlign: 'right',
131 },
132 titleTextSmall: {
133 fontSize: 36,
134 },
135 descriptionText: {
136 maxWidth: 400,
137 marginTop: 10,
138 marginLeft: 'auto',
139 textAlign: 'right',
140 },
141 contentWrapper: {
142 maxWidth: 600,
143 },
144})