mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
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'
11
12export function Header({
13 renderLeft,
14 renderRight,
15 children,
16 style,
17 onLayout,
18}: {
19 renderLeft?: () => React.ReactNode
20 renderRight?: () => React.ReactNode
21 children?: React.ReactNode
22 style?: StyleProp<ViewStyle>
23 onLayout?: (event: LayoutChangeEvent) => void
24}) {
25 const t = useTheme()
26 return (
27 <View
28 onLayout={onLayout}
29 style={[
30 a.sticky,
31 a.top_0,
32 a.relative,
33 a.w_full,
34 a.py_sm,
35 a.flex_row,
36 a.justify_center,
37 a.align_center,
38 {minHeight: 50},
39 a.border_b,
40 t.atoms.border_contrast_medium,
41 t.atoms.bg,
42 {borderTopLeftRadius: a.rounded_md.borderRadius},
43 {borderTopRightRadius: a.rounded_md.borderRadius},
44 style,
45 ]}>
46 {renderLeft && (
47 <View style={[a.absolute, {left: 6}]}>{renderLeft()}</View>
48 )}
49 {children}
50 {renderRight && (
51 <View style={[a.absolute, {right: 6}]}>{renderRight()}</View>
52 )}
53 </View>
54 )
55}
56
57export function HeaderText({
58 children,
59 style,
60}: {
61 children?: React.ReactNode
62 style?: StyleProp<TextStyle>
63}) {
64 return (
65 <Text style={[a.text_lg, a.text_center, a.font_bold, style]}>
66 {children}
67 </Text>
68 )
69}