First UI draft

components/QrScanModal.tsx

@@ -0,0 +1,42 @@
+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>
+    );
+}