jollywhoppers.com
Bluesky app fork with some witchin' additions 馃挮
witchsky.app
bluesky
fork
client
1import {type JSX} from 'react'
2import {View} from 'react-native'
3import {msg} from '@lingui/core/macro'
4import {useLingui} from '@lingui/react'
5import type React from 'react'
6
7import {HITSLOP_10} from '#/lib/constants'
8import {useKawaiiMode} from '#/state/preferences/kawaii'
9import {useSession} from '#/state/session'
10import {useShellLayout} from '#/state/shell/shell-layout'
11import {HomeHeaderLayoutMobile} from '#/view/com/home/HomeHeaderLayoutMobile'
12import {Logo} from '#/view/icons/Logo'
13import {atoms as a, useBreakpoints, useGutters, useTheme} from '#/alf'
14import {ButtonIcon} from '#/components/Button'
15import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
16import * as Layout from '#/components/Layout'
17import {Link} from '#/components/Link'
18
19export function HomeHeaderLayout(props: {
20 children: React.ReactNode
21 tabBarAnchor: JSX.Element | null | undefined
22}) {
23 const {gtMobile} = useBreakpoints()
24 if (!gtMobile) {
25 return <HomeHeaderLayoutMobile {...props} />
26 } else {
27 return <HomeHeaderLayoutDesktopAndTablet {...props} />
28 }
29}
30
31function HomeHeaderLayoutDesktopAndTablet({
32 children,
33 tabBarAnchor,
34}: {
35 children: React.ReactNode
36 tabBarAnchor: JSX.Element | null | undefined
37}) {
38 const t = useTheme()
39 const {headerHeight} = useShellLayout()
40 const {hasSession} = useSession()
41 const {_} = useLingui()
42 const kawaii = useKawaiiMode()
43 const gutters = useGutters([0, 'base'])
44
45 return (
46 <>
47 {hasSession && (
48 <Layout.Center>
49 <View
50 style={[a.flex_row, a.align_center, gutters, a.pt_md, t.atoms.bg]}>
51 <View style={{width: 34}} />
52 <View style={[a.flex_1, a.align_center, a.justify_center]}>
53 <Logo width={kawaii ? 60 : 28} />
54 </View>
55 <Link
56 to="/feeds"
57 hitSlop={HITSLOP_10}
58 label={_(msg`View your feeds and explore more`)}
59 size="small"
60 variant="ghost"
61 color="secondary"
62 shape="square"
63 style={[a.justify_center]}>
64 <ButtonIcon icon={FeedsIcon} size="lg" />
65 </Link>
66 </View>
67 </Layout.Center>
68 )}
69 {tabBarAnchor}
70 <Layout.Center
71 style={[a.sticky, a.z_10, a.align_center, t.atoms.bg, {top: 0}]}
72 onLayout={e => {
73 headerHeight.set(e.nativeEvent.layout.height)
74 }}>
75 {children}
76 </Layout.Center>
77 </>
78 )
79}