+
Initializing MAT dashboard...
+
+
+
+
+
+
diff --git a/mobile/src/components/ConnectionBanner.tsx b/mobile/src/components/ConnectionBanner.tsx
new file mode 100644
index 0000000..9ab6601
--- /dev/null
+++ b/mobile/src/components/ConnectionBanner.tsx
@@ -0,0 +1,70 @@
+import { StyleSheet, View } from 'react-native';
+import { ThemedText } from './ThemedText';
+
+type ConnectionState = 'connected' | 'simulated' | 'disconnected';
+
+type ConnectionBannerProps = {
+ status: ConnectionState;
+};
+
+const resolveState = (status: ConnectionState) => {
+ if (status === 'connected') {
+ return {
+ label: 'LIVE STREAM',
+ backgroundColor: '#0F6B2A',
+ textColor: '#E2FFEA',
+ };
+ }
+
+ if (status === 'disconnected') {
+ return {
+ label: 'DISCONNECTED',
+ backgroundColor: '#8A1E2A',
+ textColor: '#FFE3E7',
+ };
+ }
+
+ return {
+ label: 'SIMULATED DATA',
+ backgroundColor: '#9A5F0C',
+ textColor: '#FFF3E1',
+ };
+};
+
+export const ConnectionBanner = ({ status }: ConnectionBannerProps) => {
+ const state = resolveState(status);
+
+ return (
+