tooot/src/components/Header/Center.tsx

48 lines
1.1 KiB
TypeScript

import Icon from '@components/Icon'
import CustomText from '@components/Text'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { View } from 'react-native'
export interface Props {
content?: string
inverted?: boolean
onPress?: () => void
dropdown?: boolean
}
// Used for Android mostly
const HeaderCenter: React.FC<Props> = ({
content,
inverted = false,
onPress,
dropdown = false
}) => {
const { colors } = useTheme()
return (
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<CustomText
style={{
color: inverted ? colors.primaryOverlay : colors.primaryDefault
}}
fontSize='L'
fontWeight='Bold'
numberOfLines={1}
children={content}
{...(onPress && { onPress })}
/>
<Icon
name='ChevronDown'
size={StyleConstants.Font.Size.M}
color={colors.primaryDefault}
style={{ marginLeft: StyleConstants.Spacing.XS, opacity: dropdown ? undefined : 0 }}
strokeWidth={3}
/>
</View>
)
}
export default HeaderCenter