mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import React from 'react'
2import {StyleProp, TextStyle, View, ViewStyle} from 'react-native'
3
4import {atoms as a, useTheme, web} from '#/alf'
5import {Text} from '#/components/Typography'
6
7export function Header({
8 renderLeft,
9 renderRight,
10 children,
11 style,
12}: {
13 renderLeft?: () => React.ReactNode
14 renderRight?: () => React.ReactNode
15 children?: React.ReactNode
16 style?: StyleProp<ViewStyle>
17}) {
18 const t = useTheme()
19 return (
20 <View
21 style={[
22 a.relative,
23 a.w_full,
24 a.py_sm,
25 a.flex_row,
26 a.justify_center,
27 a.align_center,
28 {minHeight: 50},
29 a.border_b,
30 t.atoms.border_contrast_medium,
31 t.atoms.bg,
32 web([
33 {borderRadiusTopLeft: a.rounded_md.borderRadius},
34 {borderRadiusTopRight: a.rounded_md.borderRadius},
35 ]),
36 style,
37 ]}>
38 {renderLeft && (
39 <View style={[a.absolute, {left: 6}]}>{renderLeft()}</View>
40 )}
41 {children}
42 {renderRight && (
43 <View style={[a.absolute, {right: 6}]}>{renderRight()}</View>
44 )}
45 </View>
46 )
47}
48
49export function HeaderText({
50 children,
51 style,
52}: {
53 children?: React.ReactNode
54 style?: StyleProp<TextStyle>
55}) {
56 return (
57 <Text style={[a.text_lg, a.text_center, a.font_bold, style]}>
58 {children}
59 </Text>
60 )
61}