88 lines
1.9 KiB
TypeScript
88 lines
1.9 KiB
TypeScript
import React from 'react'
|
|
import { View, Text, Pressable, StyleSheet } from 'react-native'
|
|
import { PointsIcon, SearchIcon } from '@/components/icon'
|
|
|
|
interface TitleBarProps {
|
|
points?: number
|
|
onPointsPress?: () => void
|
|
onSearchPress?: () => void
|
|
onLayout?: (height: number) => void
|
|
}
|
|
|
|
export function TitleBar({
|
|
points = 60,
|
|
onPointsPress,
|
|
onSearchPress,
|
|
onLayout,
|
|
}: TitleBarProps): React.ReactNode {
|
|
return (
|
|
<View
|
|
testID="title-bar"
|
|
style={styles.titleBar}
|
|
onLayout={(event) => {
|
|
const { height } = event.nativeEvent.layout
|
|
onLayout?.(height)
|
|
}}
|
|
>
|
|
<Text style={styles.title}>Popcore</Text>
|
|
<View style={styles.titleBarRight}>
|
|
<Pressable
|
|
testID="points-container"
|
|
style={styles.pointsContainer}
|
|
onPress={onPointsPress}
|
|
>
|
|
<PointsIcon />
|
|
<Text style={styles.pointsText}>{points}</Text>
|
|
</Pressable>
|
|
<Pressable
|
|
testID="search-button"
|
|
style={styles.searchButton}
|
|
onPress={onSearchPress}
|
|
>
|
|
<SearchIcon />
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
titleBar: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 12,
|
|
backgroundColor: '#090A0B',
|
|
},
|
|
title: {
|
|
fontSize: 24,
|
|
fontWeight: 'bold',
|
|
color: '#F5F5F5',
|
|
},
|
|
titleBarRight: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 12,
|
|
},
|
|
pointsContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: '#1C1E22',
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 6,
|
|
borderRadius: 16,
|
|
gap: 4,
|
|
},
|
|
pointsText: {
|
|
color: '#F5F5F5',
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
},
|
|
searchButton: {
|
|
padding: 8,
|
|
backgroundColor: '#1C1E22',
|
|
borderRadius: 20,
|
|
},
|
|
})
|