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'
8import type React from 'react'
9
10import {atoms as a, useTheme} from '#/alf'
11import {Text} from '#/components/Typography'
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.relative,
32 a.w_full,
33 a.py_sm,
34 a.flex_row,
35 a.justify_center,
36 a.align_center,
37 {minHeight: 50},
38 a.border_b,
39 t.atoms.border_contrast_medium,
40 t.atoms.bg,
41 {borderTopLeftRadius: a.rounded_md.borderRadius},
42 {borderTopRightRadius: a.rounded_md.borderRadius},
43 style,
44 ]}>
45 {renderLeft && (
46 <View style={[a.absolute, {left: 6}]}>{renderLeft()}</View>
47 )}
48 {children}
49 {renderRight && (
50 <View style={[a.absolute, {right: 6}]}>{renderRight()}</View>
51 )}
52 </View>
53 )
54}
55
56export function HeaderText({
57 children,
58 style,
59}: {
60 children?: React.ReactNode
61 style?: StyleProp<TextStyle>
62}) {
63 return (
64 <Text style={[a.text_lg, a.text_center, a.font_bold, style]}>
65 {children}
66 </Text>
67 )
68}