Bluesky app fork with some witchin' additions 馃挮
witchsky.app
bluesky
fork
client
1import {
2 type LayoutChangeEvent,
3 type StyleProp,
4 type TextStyle,
5 View,
6 type ViewStyle,
7} from 'react-native'
8
9import {atoms as a, useTheme} from '#/alf'
10import {Text} from '#/components/Typography'
11import {IS_LIQUID_GLASS} from '#/env'
12
13export function Header({
14 renderLeft,
15 renderRight,
16 children,
17 style,
18 onLayout,
19}: {
20 renderLeft?: () => React.ReactNode
21 renderRight?: () => React.ReactNode
22 children?: React.ReactNode
23 style?: StyleProp<ViewStyle>
24 onLayout?: (event: LayoutChangeEvent) => void
25}) {
26 const t = useTheme()
27 return (
28 <View
29 onLayout={onLayout}
30 style={[
31 a.sticky,
32 a.top_0,
33 a.relative,
34 a.w_full,
35 a.py_sm,
36 a.flex_row,
37 a.justify_center,
38 a.align_center,
39 {minHeight: IS_LIQUID_GLASS ? 64 : 50},
40 a.border_b,
41 t.atoms.border_contrast_medium,
42 t.atoms.bg,
43 {borderTopLeftRadius: a.rounded_md.borderRadius},
44 {borderTopRightRadius: a.rounded_md.borderRadius},
45 style,
46 ]}>
47 {renderLeft && (
48 <View style={[a.absolute, {left: IS_LIQUID_GLASS ? 12 : 6}]}>
49 {renderLeft()}
50 </View>
51 )}
52 {children}
53 {renderRight && (
54 <View style={[a.absolute, {right: IS_LIQUID_GLASS ? 12 : 6}]}>
55 {renderRight()}
56 </View>
57 )}
58 </View>
59 )
60}
61
62export function HeaderText({
63 children,
64 style,
65}: {
66 children?: React.ReactNode
67 style?: StyleProp<TextStyle>
68}) {
69 return (
70 <Text
71 style={[a.text_lg, a.text_center, a.font_semi_bold, style]}
72 maxFontSizeMultiplier={2}>
73 {children}
74 </Text>
75 )
76}