48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity } from 'react-native';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { WifiOff, RefreshCw } from 'lucide-react-native';
|
|
|
|
interface OfflineScreenProps {
|
|
onRetry: () => void;
|
|
isRetrying?: boolean;
|
|
}
|
|
|
|
export default function OfflineScreen({ onRetry, isRetrying = false }: OfflineScreenProps) {
|
|
return (
|
|
<SafeAreaView className="flex-1 bg-white">
|
|
<View className="flex-1 items-center justify-center px-8">
|
|
{/* Icona con cerchio di sfondo */}
|
|
<View className="bg-gray-100 p-6 rounded-full mb-6">
|
|
<WifiOff size={64} className="text-gray-400" />
|
|
</View>
|
|
|
|
<Text className="text-2xl font-bold text-gray-800 mb-2 text-center">
|
|
Sei Offline
|
|
</Text>
|
|
|
|
<Text className="text-base text-gray-500 text-center mb-10 leading-6">
|
|
Sembra che non ci sia connessione a internet.{'\n'}Controlla il Wi-Fi o i dati mobili e riprova.
|
|
</Text>
|
|
|
|
{/* Pulsante Riprova */}
|
|
<TouchableOpacity
|
|
onPress={onRetry}
|
|
disabled={isRetrying}
|
|
className={`flex-row items-center justify-center w-full py-4 rounded-xl gap-4 ${
|
|
isRetrying ? 'bg-gray-300' : 'bg-[#099499] active:bg-[#077f83]'
|
|
}`}
|
|
>
|
|
<RefreshCw
|
|
size={20}
|
|
color="white"
|
|
className={`${isRetrying ? 'animate-spin' : ''}`} // TODO: animate-spin richiede config tailwind o gestiscilo manualmente
|
|
/>
|
|
<Text className="text-white font-bold text-lg">
|
|
{isRetrying ? 'Controllo...' : 'Riprova'}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
} |