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