779bf8ff43
Services: ws.service, api.service, simulation.service, rssi.service (android+ios) Stores: poseStore, settingsStore, matStore (Zustand) Types: sensing, mat, api, navigation Hooks: usePoseStream, useRssiScanner, useServerReachability Theme: colors, typography, spacing, ThemeContext Navigation: MainTabs (5 tabs), RootNavigator, types Components: GaugeArc, SparklineChart, OccupancyGrid, StatusDot, ConnectionBanner, SignalBar, +more Utils: ringBuffer, colorMap, formatters, urlValidator Verified: tsc 0 errors, jest passes
72 lines
1.3 KiB
TypeScript
72 lines
1.3 KiB
TypeScript
import { StyleSheet } from 'react-native';
|
|
import { ThemedText } from './ThemedText';
|
|
import { colors } from '../theme/colors';
|
|
|
|
type Mode = 'CSI' | 'RSSI' | 'SIM' | 'LIVE';
|
|
|
|
const modeStyle: Record<
|
|
Mode,
|
|
{
|
|
background: string;
|
|
border: string;
|
|
color: string;
|
|
}
|
|
> = {
|
|
CSI: {
|
|
background: 'rgba(50, 184, 198, 0.25)',
|
|
border: colors.accent,
|
|
color: colors.accent,
|
|
},
|
|
RSSI: {
|
|
background: 'rgba(255, 165, 2, 0.2)',
|
|
border: colors.warn,
|
|
color: colors.warn,
|
|
},
|
|
SIM: {
|
|
background: 'rgba(255, 71, 87, 0.18)',
|
|
border: colors.simulated,
|
|
color: colors.simulated,
|
|
},
|
|
LIVE: {
|
|
background: 'rgba(46, 213, 115, 0.18)',
|
|
border: colors.connected,
|
|
color: colors.connected,
|
|
},
|
|
};
|
|
|
|
type ModeBadgeProps = {
|
|
mode: Mode;
|
|
};
|
|
|
|
export const ModeBadge = ({ mode }: ModeBadgeProps) => {
|
|
const style = modeStyle[mode];
|
|
|
|
return (
|
|
<ThemedText
|
|
preset="labelMd"
|
|
style={[
|
|
styles.badge,
|
|
{
|
|
backgroundColor: style.background,
|
|
borderColor: style.border,
|
|
color: style.color,
|
|
},
|
|
]}
|
|
>
|
|
{mode}
|
|
</ThemedText>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
badge: {
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 4,
|
|
borderRadius: 999,
|
|
borderWidth: 1,
|
|
overflow: 'hidden',
|
|
letterSpacing: 1,
|
|
textAlign: 'center',
|
|
},
|
|
});
|