refactor topbar props
This commit is contained in:
parent
5b802b1d15
commit
0ee881e2d8
|
@ -16,34 +16,20 @@ import { BlurView } from 'expo-blur'
|
||||||
|
|
||||||
import { DropdownMenu } from '../dropdown-menu'
|
import { DropdownMenu } from '../dropdown-menu'
|
||||||
|
|
||||||
import type { GetProps, StackProps } from '@tamagui/core'
|
import type { Channel } from '../sidebar/mock-data'
|
||||||
|
|
||||||
type BaseProps = GetProps<typeof Stack>
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
membersVisisble: boolean
|
membersVisisble: boolean
|
||||||
onMembersPress: () => void
|
onMembersPress: () => void
|
||||||
goBack?: () => void
|
goBack?: () => void
|
||||||
title?: string
|
channel: Channel
|
||||||
description?: string
|
blur?: boolean
|
||||||
icon?: React.ReactNode
|
}
|
||||||
refForScroll?: React.RefObject<HTMLDivElement>
|
|
||||||
backgroundColor?: StackProps['backgroundColor']
|
|
||||||
isBlurred?: boolean
|
|
||||||
} & BaseProps
|
|
||||||
|
|
||||||
const Topbar = (props: Props) => {
|
const Topbar = (props: Props) => {
|
||||||
const {
|
const { membersVisisble, onMembersPress, goBack, blur, channel } = props
|
||||||
membersVisisble,
|
|
||||||
onMembersPress,
|
const { title, description, icon } = channel
|
||||||
goBack,
|
|
||||||
title,
|
|
||||||
description,
|
|
||||||
icon,
|
|
||||||
backgroundColor,
|
|
||||||
isBlurred,
|
|
||||||
...rest
|
|
||||||
} = props
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BlurView intensity={40} style={{ zIndex: 100 }}>
|
<BlurView intensity={40} style={{ zIndex: 100 }}>
|
||||||
|
@ -53,18 +39,17 @@ const Topbar = (props: Props) => {
|
||||||
alignItems="center"
|
alignItems="center"
|
||||||
justifyContent="space-between"
|
justifyContent="space-between"
|
||||||
padding={16}
|
padding={16}
|
||||||
backgroundColor={backgroundColor || '$background'}
|
backgroundColor={'$blurBackground'}
|
||||||
borderBottomWidth={1}
|
borderBottomWidth={1}
|
||||||
borderColor={isBlurred ? 'transparent' : '$neutral-80-opa-10'}
|
borderColor={blur ? 'transparent' : '$neutral-80-opa-10'}
|
||||||
width="100%"
|
width="100%"
|
||||||
{...rest}
|
|
||||||
>
|
>
|
||||||
<Stack flexDirection="row" alignItems="center" flexWrap="wrap">
|
<Stack flexDirection="row" alignItems="center" flexWrap="wrap">
|
||||||
<Stack mr={12} $gtSm={{ display: 'none' }}>
|
<Stack mr={12} $gtSm={{ display: 'none' }}>
|
||||||
<IconButton
|
<IconButton
|
||||||
icon={<ArrowLeftIcon />}
|
icon={<ArrowLeftIcon />}
|
||||||
onPress={() => goBack?.()}
|
onPress={() => goBack?.()}
|
||||||
blurred={isBlurred}
|
blurred={blur}
|
||||||
/>
|
/>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
||||||
|
@ -109,9 +94,10 @@ const Topbar = (props: Props) => {
|
||||||
icon={<MembersIcon />}
|
icon={<MembersIcon />}
|
||||||
selected={membersVisisble}
|
selected={membersVisisble}
|
||||||
onPress={onMembersPress}
|
onPress={onMembersPress}
|
||||||
blurred={isBlurred}
|
blurred={blur}
|
||||||
/>
|
/>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<IconButton icon={<OptionsIcon />} />
|
<IconButton icon={<OptionsIcon />} />
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue