bas.sh
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {type JSX} from 'react'
2import {View} from 'react-native'
3import Animated from 'react-native-reanimated'
4import {msg} from '@lingui/macro'
5import {useLingui} from '@lingui/react'
6
7import {HITSLOP_10} from '#/lib/constants'
8import {PressableScale} from '#/lib/custom-animations/PressableScale'
9import {useHaptics} from '#/lib/haptics'
10import {useMinimalShellHeaderTransform} from '#/lib/hooks/useMinimalShellTransform'
11import {emitSoftReset} from '#/state/events'
12import {useSession} from '#/state/session'
13import {useShellLayout} from '#/state/shell/shell-layout'
14import {Logo} from '#/view/icons/Logo'
15import {atoms as a, useTheme} from '#/alf'
16import {ButtonIcon} from '#/components/Button'
17import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
18import * as Layout from '#/components/Layout'
19import {Link} from '#/components/Link'
20
21export function HomeHeaderLayoutMobile({
22 children,
23}: {
24 children: React.ReactNode
25 tabBarAnchor: JSX.Element | null | undefined
26}) {
27 const t = useTheme()
28 const {_} = useLingui()
29 const {headerHeight} = useShellLayout()
30 const headerMinimalShellTransform = useMinimalShellHeaderTransform()
31 const {hasSession} = useSession()
32 const playHaptic = useHaptics()
33
34 return (
35 <Animated.View
36 style={[
37 a.fixed,
38 a.z_10,
39 t.atoms.bg,
40 {
41 top: 0,
42 left: 0,
43 right: 0,
44 },
45 headerMinimalShellTransform,
46 ]}
47 onLayout={e => {
48 headerHeight.set(e.nativeEvent.layout.height)
49 }}>
50 <Layout.Header.Outer noBottomBorder>
51 <Layout.Header.Slot>
52 <Layout.Header.MenuButton />
53 </Layout.Header.Slot>
54
55 <View style={[a.flex_1, a.align_center]}>
56 <PressableScale
57 targetScale={0.9}
58 onPress={() => {
59 playHaptic('Light')
60 emitSoftReset()
61 }}>
62 <Logo width={30} />
63 </PressableScale>
64 </View>
65
66 <Layout.Header.Slot>
67 {hasSession && (
68 <Link
69 testID="viewHeaderHomeFeedPrefsBtn"
70 to={{screen: 'Feeds'}}
71 hitSlop={HITSLOP_10}
72 label={_(msg`View your feeds and explore more`)}
73 size="small"
74 variant="ghost"
75 color="secondary"
76 shape="square"
77 style={[
78 a.justify_center,
79 {marginRight: -Layout.BUTTON_VISUAL_ALIGNMENT_OFFSET},
80 a.bg_transparent,
81 ]}>
82 <ButtonIcon icon={FeedsIcon} size="lg" />
83 </Link>
84 )}
85 </Layout.Header.Slot>
86 </Layout.Header.Outer>
87 {children}
88 </Animated.View>
89 )
90}