Samuel Newman
78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
import React from 'react'
|
|
import {View} from 'react-native'
|
|
import {msg} from '@lingui/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
|
|
import {useKawaiiMode} from '#/state/preferences/kawaii'
|
|
import {useSession} from '#/state/session'
|
|
import {useShellLayout} from '#/state/shell/shell-layout'
|
|
import {HomeHeaderLayoutMobile} from '#/view/com/home/HomeHeaderLayoutMobile'
|
|
import {Logo} from '#/view/icons/Logo'
|
|
import {atoms as a, useBreakpoints, useGutters, useTheme} from '#/alf'
|
|
import {ButtonIcon} from '#/components/Button'
|
|
import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
|
|
import * as Layout from '#/components/Layout'
|
|
import {Link} from '#/components/Link'
|
|
|
|
export function HomeHeaderLayout(props: {
|
|
children: React.ReactNode
|
|
tabBarAnchor: JSX.Element | null | undefined
|
|
}) {
|
|
const {gtMobile} = useBreakpoints()
|
|
if (!gtMobile) {
|
|
return <HomeHeaderLayoutMobile {...props} />
|
|
} else {
|
|
return <HomeHeaderLayoutDesktopAndTablet {...props} />
|
|
}
|
|
}
|
|
|
|
function HomeHeaderLayoutDesktopAndTablet({
|
|
children,
|
|
tabBarAnchor,
|
|
}: {
|
|
children: React.ReactNode
|
|
tabBarAnchor: JSX.Element | null | undefined
|
|
}) {
|
|
const t = useTheme()
|
|
const {headerHeight} = useShellLayout()
|
|
const {hasSession} = useSession()
|
|
const {_} = useLingui()
|
|
const kawaii = useKawaiiMode()
|
|
const gutters = useGutters([0, 'base'])
|
|
|
|
return (
|
|
<>
|
|
{hasSession && (
|
|
<Layout.Center>
|
|
<View
|
|
style={[a.flex_row, a.align_center, gutters, a.pt_md, t.atoms.bg]}>
|
|
<View style={{width: 34}} />
|
|
<View style={[a.flex_1, a.align_center, a.justify_center]}>
|
|
<Logo width={kawaii ? 60 : 28} />
|
|
</View>
|
|
<Link
|
|
to="/feeds"
|
|
hitSlop={10}
|
|
label={_(msg`View your feeds and explore more`)}
|
|
size="small"
|
|
variant="ghost"
|
|
color="secondary"
|
|
shape="square"
|
|
style={[a.justify_center]}>
|
|
<ButtonIcon icon={FeedsIcon} size="lg" />
|
|
</Link>
|
|
</View>
|
|
</Layout.Center>
|
|
)}
|
|
{tabBarAnchor}
|
|
<Layout.Center
|
|
style={[a.sticky, a.z_10, a.align_center, {top: 0}]}
|
|
onLayout={e => {
|
|
headerHeight.set(e.nativeEvent.layout.height)
|
|
}}>
|
|
{children}
|
|
</Layout.Center>
|
|
</>
|
|
)
|
|
}
|