55eb62189a
DS 컴포넌트 9개 (ScreenPanel, WaveBars, AppStatusBar, Header, FilterChip 신규), 5개 탭 + 로그인 화면 D3RO 인스트루먼트 미학 적용, i18n 연결 (I18nProvider + 모바일 전용 키 80+개), 모노레포 workspaces에 apps/mobile 추가.
50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
// packages/ui-native/src/components/StatusBar.tsx
|
|
// RN StatusBar — bottom status strip with LED + model label
|
|
|
|
import { View, type ViewStyle, type StyleProp } from 'react-native'
|
|
import { d3roNativePalette, d3roNativeFonts } from '../theme'
|
|
import { Led } from './Led'
|
|
import { PhosphorText } from './PhosphorText'
|
|
|
|
export interface AppStatusBarProps {
|
|
model?: string
|
|
label?: string
|
|
style?: StyleProp<ViewStyle>
|
|
}
|
|
|
|
export function AppStatusBar({
|
|
model = 'CLOUD CLAUDE',
|
|
label = 'PRECISION DATA LINK',
|
|
style
|
|
}: AppStatusBarProps): React.ReactElement {
|
|
const containerStyle: ViewStyle = {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 16,
|
|
gap: 8,
|
|
opacity: 0.5
|
|
}
|
|
|
|
return (
|
|
<View style={[containerStyle, style]}>
|
|
<Led color="green" size={5} />
|
|
<PhosphorText
|
|
variant="label"
|
|
color="muted"
|
|
style={{ fontFamily: d3roNativeFonts.mono, fontSize: 8, letterSpacing: 1.5 }}
|
|
>
|
|
{model}
|
|
</PhosphorText>
|
|
<View style={{ width: 1, height: 8, backgroundColor: d3roNativePalette.border.default }} />
|
|
<PhosphorText
|
|
variant="label"
|
|
color="muted"
|
|
style={{ fontFamily: d3roNativeFonts.mono, fontSize: 8, letterSpacing: 1.5 }}
|
|
>
|
|
{label}
|
|
</PhosphorText>
|
|
</View>
|
|
)
|
|
}
|