61 lines
1.4 KiB
JavaScript
61 lines
1.4 KiB
JavaScript
import { View, TouchableOpacity } from "react-native";
|
|
import { MaterialCommunityIcons } from "@expo/vector-icons";
|
|
|
|
import Text from "~/components/Text";
|
|
|
|
import { createStyles } from "~/theme";
|
|
|
|
export default function ConnectivityErrorCompact({
|
|
retryConnect,
|
|
containerProps = {},
|
|
}) {
|
|
const styles = useStyles();
|
|
return (
|
|
<View {...containerProps} style={[styles.container, containerProps.style]}>
|
|
<MaterialCommunityIcons style={styles.icon} name="connection" />
|
|
<Text style={styles.label}>Connexion perdue</Text>
|
|
<TouchableOpacity
|
|
accessibilityRole="button"
|
|
style={styles.button}
|
|
onPress={retryConnect}
|
|
>
|
|
<Text style={styles.buttonText}>Réessayer</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const useStyles = createStyles(({ fontSize, theme: { colors } }) => ({
|
|
container: {
|
|
// flex: 1,
|
|
height: 48,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 16,
|
|
},
|
|
icon: {
|
|
paddingBottom: 0,
|
|
color: colors.primary,
|
|
fontSize: 24,
|
|
},
|
|
label: {
|
|
textAlign: "center",
|
|
fontSize: 16,
|
|
},
|
|
button: {
|
|
height: 35,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
backgroundColor: colors.surface,
|
|
borderColor: colors.outline,
|
|
borderWidth: 1,
|
|
borderRadius: 12,
|
|
paddingHorizontal: 16,
|
|
},
|
|
buttonText: {
|
|
color: colors.onSurface,
|
|
fontSize: 15,
|
|
},
|
|
}));
|