55eb62189a
DS 컴포넌트 9개 (ScreenPanel, WaveBars, AppStatusBar, Header, FilterChip 신규), 5개 탭 + 로그인 화면 D3RO 인스트루먼트 미학 적용, i18n 연결 (I18nProvider + 모바일 전용 키 80+개), 모노레포 workspaces에 apps/mobile 추가.
55 lines
1.5 KiB
TypeScript
55 lines
1.5 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 { d3roNativePalette } from '../theme'
|
|
|
|
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 {
|
|
return (
|
|
<View
|
|
style={[
|
|
{
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 20,
|
|
paddingTop: paddingTop + 8,
|
|
paddingBottom: 12,
|
|
borderBottomWidth: showBorder ? 1 : 0,
|
|
borderBottomColor: d3roNativePalette.border.subtle
|
|
},
|
|
style
|
|
]}
|
|
>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
|
|
<Led color="amber" size={8} />
|
|
<PhosphorText variant="label" color="muted" style={{ letterSpacing: 3 }}>
|
|
{title}
|
|
</PhosphorText>
|
|
</View>
|
|
{rightContent ?? (
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
|
|
<Led color="green" size={6} />
|
|
<Led color="amber" size={6} />
|
|
</View>
|
|
)}
|
|
</View>
|
|
)
|
|
}
|