entregas_app/components/offline-screen.tsx

86 lines
2.2 KiB
TypeScript
Raw Normal View History

"use client"
import { View, Text, StyleSheet } from "react-native"
import { SafeAreaView } from "react-native-safe-area-context"
import { COLORS, SIZES, SHADOWS } from "../constants/theme"
import Icon from "../../components/Icon"
const OfflineScreen = () => {
return (
<SafeAreaView style={styles.container} edges={["top"]}>
<View style={styles.content}>
<View style={styles.iconContainer}>
<Icon type="material" name="wifi-off" size={80} color={COLORS.warning} />
</View>
<Text style={styles.title}>Sem conexão com a internet</Text>
<Text style={styles.message}>
Verifique sua conexão de rede e tente novamente. O aplicativo requer uma conexão ativa com a internet para
funcionar corretamente.
</Text>
<View style={styles.infoCard}>
<Icon type="material" name="info" size={20} color={COLORS.primary} style={styles.infoIcon} />
<Text style={styles.infoText}>
Você foi desconectado automaticamente. Por favor, faça login novamente quando estiver online.
</Text>
</View>
</View>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: COLORS.background,
},
content: {
flex: 1,
justifyContent: "center",
alignItems: "center",
padding: 24,
},
iconContainer: {
width: 150,
height: 150,
borderRadius: 75,
backgroundColor: "rgba(255, 193, 7, 0.1)",
justifyContent: "center",
alignItems: "center",
marginBottom: 32,
},
title: {
fontSize: SIZES.xLarge,
fontWeight: "bold",
color: COLORS.text,
marginBottom: 16,
textAlign: "center",
},
message: {
fontSize: SIZES.medium,
color: COLORS.textLight,
textAlign: "center",
marginBottom: 32,
lineHeight: 24,
},
infoCard: {
flexDirection: "row",
alignItems: "center",
backgroundColor: "rgba(0, 74, 141, 0.1)",
borderRadius: 12,
padding: 16,
width: "100%",
...SHADOWS.small,
},
infoIcon: {
marginRight: 12,
},
infoText: {
flex: 1,
fontSize: SIZES.font,
color: COLORS.primary,
lineHeight: 22,
},
})
export default OfflineScreen