refactor topbar props

packages/components/src/topbar/topbar.tsx

@@ -16,34 +16,20 @@ import { BlurView } from 'expo-blur'
 
 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 = {
   membersVisisble: boolean
   onMembersPress: () => 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 {
+  const { membersVisisble, onMembersPress, goBack, blur, channel } = props
-    membersVisisble,
+
-    onMembersPress,
+  const { title, description, icon } = channel
-    goBack,
-    title,
-    description,
-    icon,
-    backgroundColor,
-    isBlurred,
-    ...rest
-  } = props
 
   return (
     <BlurView intensity={40} style={{ zIndex: 100 }}>
@@ -53,18 +39,17 @@ const Topbar = (props: Props) => {
         alignItems="center"
         justifyContent="space-between"
         padding={16}
-        backgroundColor={backgroundColor || '$background'}
+        backgroundColor={'$blurBackground'}
         borderBottomWidth={1}
-        borderColor={isBlurred ? 'transparent' : '$neutral-80-opa-10'}
+        borderColor={blur ? 'transparent' : '$neutral-80-opa-10'}
         width="100%"
-        {...rest}
       >
         <Stack flexDirection="row" alignItems="center" flexWrap="wrap">
           <Stack mr={12} $gtSm={{ display: 'none' }}>
             <IconButton
               icon={<ArrowLeftIcon />}
               onPress={() => goBack?.()}
-              blurred={isBlurred}
+              blurred={blur}
             />
           </Stack>
 
@@ -109,9 +94,10 @@ const Topbar = (props: Props) => {
               icon={<MembersIcon />}
               selected={membersVisisble}
               onPress={onMembersPress}
-              blurred={isBlurred}
+              blurred={blur}
             />
           </Stack>
+
           <DropdownMenu>
             <IconButton icon={<OptionsIcon />} />