Mohamed Boudra
2d1ab5bf79
- Introduced a Babel configuration file for the app. - Updated various components and styles to utilize the new theme structure, replacing direct color references with palette-based colors for improved consistency and maintainability. - Adjusted styles across multiple components to align with the new theme, enhancing the overall UI experience.
54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
import { View, Text } from 'react-native';
|
|
import { StyleSheet } from 'react-native-unistyles';
|
|
|
|
interface ConnectionStatusProps {
|
|
isConnected: boolean;
|
|
}
|
|
|
|
const styles = StyleSheet.create((theme) => ({
|
|
container: {
|
|
paddingHorizontal: theme.spacing[4],
|
|
paddingVertical: theme.spacing[3],
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: theme.colors.border,
|
|
},
|
|
row: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
dot: {
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: theme.borderRadius.full,
|
|
marginRight: theme.spacing[2],
|
|
},
|
|
dotConnected: {
|
|
backgroundColor: theme.colors.palette.green[500],
|
|
},
|
|
dotDisconnected: {
|
|
backgroundColor: theme.colors.destructive,
|
|
},
|
|
text: {
|
|
fontSize: theme.fontSize.sm,
|
|
},
|
|
textConnected: {
|
|
color: theme.colors.palette.green[500],
|
|
},
|
|
textDisconnected: {
|
|
color: theme.colors.destructive,
|
|
},
|
|
}));
|
|
|
|
export function ConnectionStatus({ isConnected }: ConnectionStatusProps) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.row}>
|
|
<View style={[styles.dot, isConnected ? styles.dotConnected : styles.dotDisconnected]} />
|
|
<Text style={[styles.text, isConnected ? styles.textConnected : styles.textDisconnected]}>
|
|
{isConnected ? 'Connected' : 'Disconnected'}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|