matiru

 1import {
 2  Alert,
 3  Modal,
 4  StyleSheet,
 5  Text,
 6  TouchableOpacity,
 7  View,
 8} from "react-native";
 9import QRCode from "react-native-qrcode-svg";
10import * as Clipboard from "expo-clipboard";
11import { colors } from "../styles";
12
13export default function QRModal({ visible, onClose, value }) {
14  const copyToClipboard = async () => {
15    try {
16      await Clipboard.setStringAsync(value);
17      Alert.alert("Copied", "Produce ID copied to clipboard");
18    } catch (e) {
19      Alert.alert("Error", "Failed to copy");
20    }
21  };
22
23  if (!visible) return null;
24
25  return (
26    <Modal animationType="slide" transparent visible={visible}>
27      <View style={styles.backdrop}>
28        <View style={styles.card}>
29          <Text style={styles.title}>Produce Registered</Text>
30          <Text style={styles.subtitle}>Scan to view provenance</Text>
31          <View style={styles.qrWrap}>
32            <QRCode value={value} size={180} />
33          </View>
34
35          <Text style={styles.idText}>{value}</Text>
36
37          <View style={styles.row}>
38            <TouchableOpacity style={styles.button} onPress={copyToClipboard}>
39              <Text style={styles.buttonText}>Copy ID</Text>
40            </TouchableOpacity>
41            <TouchableOpacity
42              style={[styles.button, styles.close]}
43              onPress={onClose}
44            >
45              <Text style={styles.buttonText}>Close</Text>
46            </TouchableOpacity>
47          </View>
48        </View>
49      </View>
50    </Modal>
51  );
52}
53
54const styles = StyleSheet.create({
55  backdrop: {
56    flex: 1,
57    backgroundColor: "rgba(0,0,0,0.45)",
58    justifyContent: "center",
59    alignItems: "center",
60  },
61  card: {
62    width: "86%",
63    backgroundColor: "white",
64    borderRadius: 12,
65    padding: 20,
66    alignItems: "center",
67  },
68  title: { fontSize: 20, fontWeight: "700", color: colors.darkGreen },
69  subtitle: { marginTop: 6, color: colors.midGreen, marginBottom: 12 },
70  qrWrap: { padding: 12, backgroundColor: colors.cream, borderRadius: 8 },
71  idText: { marginTop: 12, color: colors.darkGreen, fontWeight: "600" },
72  row: { flexDirection: "row", marginTop: 14 },
73  button: {
74    paddingVertical: 10,
75    paddingHorizontal: 14,
76    backgroundColor: colors.darkGreen,
77    borderRadius: 8,
78    marginHorizontal: 6,
79  },
80  close: { backgroundColor: colors.midGreen },
81  buttonText: { color: "white", fontWeight: "600" },
82});