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