Restored comments, and added share feature

components/ScannedDataBox.tsx

@@ -1,14 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, Image, TouchableOpacity, Modal } from 'react-native';
+import { View, Text, StyleSheet, Image, TouchableOpacity, Modal, Share } from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
 import { Ionicons } from '@expo/vector-icons';
 
+// Define Props for ScannedDataBox component
 interface ScannedDataBoxProps {
   data: string;
   dataType: string;
   clearScanData: () => void;
 }
 
+// Define ScanResult interface
 interface ScanResult {
   secureConnection: boolean;
   virusTotalCheck: boolean;
@@ -21,6 +23,7 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, dataType, clearSc
   console.log("ScannedDataBox -> Data", data);
   console.log("DataType", dataType);
 
+  // Set scan result based on data
   useEffect(() => {
     // Assuming scanResult is directly related to data
     setScanResult({
@@ -28,8 +31,10 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, dataType, clearSc
       virusTotalCheck: !data.includes('danger'), // Example logic
       redirects: data.includes('redirect') ? 1 : 0, // Example logic
     });
+    console.log("Scan result set:", scanResult);
   }, [data]);
 
+  // Determine the result text based on scan result
   const getResultText = () => {
     if (!scanResult) {
       return 'UNKNOWN';
@@ -43,6 +48,7 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, dataType, clearSc
     }
   };
 
+  // Determine the result color based on result text
   const getResultColor = () => {
     const result = getResultText();
     if (result === 'DANGEROUS') {
@@ -56,11 +62,26 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, dataType, clearSc
     }
   };
 
+  // Handle sharing the data
+  const handleShare = async () => {
+    try {
+      await Share.share({
+        message: data,
+      });
+      console.log('Data shared:', data);
+    } catch (error) {
+      console.error('Error sharing the data:', error);
+    }
+  };
+
   return (
     <View style={styles.dataBox}>
+      {/* Close button */}
       <TouchableOpacity style={styles.closeButton} onPress={clearScanData}>
         <Ionicons name="close-circle-outline" size={18} color="#ff69b4" />
       </TouchableOpacity>
+      
+      {/* Display scanned data */}
       <View style={styles.row}>
         <Image source={require('../assets/ScanIcon3.png')} style={styles.scan_icon} />
         <Text style={styles.payload}>{data}</Text>
@@ -74,14 +95,20 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, dataType, clearSc
         </Text>
       </View>
       <View style={styles.divider} />
+      
+      {/* Display data type */}
       <Text style={styles.typeText}>Type: {dataType}</Text>
       <Text style={styles.blankLine}>{'\n'}</Text>
+      
+      {/* Display scan checks */}
       <Text style={styles.checksText}>Checks</Text>
       <Text style={styles.checksText}>Secure Connection: {scanResult?.secureConnection ? '✔️' : '✘'}</Text>
       <Text style={styles.checksText}>Virus Total Check: {scanResult?.virusTotalCheck ? '✔️' : '✘'}</Text>
       <Text style={styles.checksText}>Redirects: {scanResult ? scanResult.redirects : 'N/A'}</Text>
+      
+      {/* Action buttons */}
       <View style={styles.iconContainer}>
-        <TouchableOpacity style={styles.iconButton}>
+        <TouchableOpacity style={styles.iconButton} onPress={handleShare}>
           <Ionicons name="share-social" size={18} color="#2196F3" />
           <Text style={styles.iconText}>Share</Text>
         </TouchableOpacity>
@@ -91,12 +118,16 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, dataType, clearSc
         </TouchableOpacity>
       </View>
       <View style={styles.divider} />
+      
+      {/* More information button */}
       <Text style={styles.moreInfoText}>More Information</Text>
       <TouchableOpacity style={styles.moreInfoButton} onPress={() => setIsModalVisible(true)}>
         <Ionicons name="shield-checkmark" size={18} color="#ff69b4" />
         <Text style={styles.moreInfoButtonText}>Security Headers</Text>
         <Ionicons name="chevron-forward" size={18} color="#ff69b4" />
       </TouchableOpacity>
+      
+      {/* Modal for security headers */}
       <Modal
         visible={isModalVisible}
         transparent={true}