60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
// packages/ui-native/src/components/Header.tsx
|
|
// RN Header — D3RO styled screen header with LEDs
|
|
// safe-area insets handled by caller (paddingTop prop or wrapper)
|
|
|
|
import { View, type ViewStyle, type StyleProp } from 'react-native'
|
|
import { Led } from './Led'
|
|
import { PhosphorText } from './PhosphorText'
|
|
import { useNativePalette } from '../theme-context'
|
|
|
|
export interface HeaderProps {
|
|
title: string
|
|
showBorder?: boolean
|
|
rightContent?: React.ReactNode
|
|
paddingTop?: number
|
|
style?: StyleProp<ViewStyle>
|
|
}
|
|
|
|
export function Header({
|
|
title,
|
|
showBorder = true,
|
|
rightContent,
|
|
paddingTop = 0,
|
|
style
|
|
}: HeaderProps): React.ReactElement {
|
|
const palette = useNativePalette()
|
|
return (
|
|
<View
|
|
style={[
|
|
{
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 20,
|
|
paddingTop: paddingTop + 8,
|
|
paddingBottom: 12,
|
|
borderBottomWidth: showBorder ? 1 : 0,
|
|
borderBottomColor: palette.border.subtle
|
|
},
|
|
style
|
|
]}
|
|
>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
|
|
<Led color="amber" size={8} />
|
|
<PhosphorText
|
|
accessibilityRole="header"
|
|
variant="label"
|
|
color="muted"
|
|
>
|
|
{title}
|
|
</PhosphorText>
|
|
</View>
|
|
{rightContent ?? (
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
|
|
<Led color="green" size={6} />
|
|
<Led color="amber" size={6} />
|
|
</View>
|
|
)}
|
|
</View>
|
|
)
|
|
}
|