42 lines
1.8 KiB
TypeScript
42 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, Modal, TouchableOpacity } from 'react-native';
|
|
import { QrCode } from 'lucide-react-native';
|
|
|
|
interface QrScanModalProps {
|
|
visible: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export default function QrScanModal({ visible, onClose }: QrScanModalProps) {
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
transparent={true}
|
|
animationType="fade"
|
|
statusBarTranslucent
|
|
>
|
|
<View className="flex-1 bg-black/90 items-center justify-center p-4">
|
|
<View className="bg-white rounded-[2rem] p-8 w-full max-w-sm items-center shadow-2xl">
|
|
<QrCode color="#099499" size={80} />
|
|
<Text className="text-2xl font-bold mt-6 text-gray-800 text-center">Scansione in corso...</Text>
|
|
<Text className="text-gray-500 mt-3 text-center text-base px-4">
|
|
Inquadra il codice QR nel riquadro sottostante
|
|
</Text>
|
|
|
|
{/* Viewfinder Simulata */}
|
|
<View className="mt-8 w-64 h-64 border-4 border-[#099499] rounded-3xl bg-gray-50 relative overflow-hidden items-center justify-center">
|
|
<View className="absolute top-0 w-full h-1 bg-red-500 shadow-[0_0_15px_rgba(239,68,68,0.8)]" />
|
|
<Text className="text-gray-400 text-sm">Camera Feed</Text>
|
|
</View>
|
|
|
|
<TouchableOpacity
|
|
onPress={onClose}
|
|
className="mt-10 bg-gray-100 rounded-2xl px-10 py-4 w-full active:bg-gray-200"
|
|
>
|
|
<Text className="text-gray-800 font-bold text-lg text-center">Annulla</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
} |