Add ProductModal component for showing product details and add-to-cart functionality

1 files changed, 40 insertions, 0 deletions

diff --git a/src/components/ProductModal.js b/src/components/ProductModal.js
index e69de29..a78e86a 100644
--- a/src/components/ProductModal.js
+++ b/src/components/ProductModal.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { View, Text, Button, Modal, StyleSheet } from 'react-native';
+
+const ProductModal = ({ visible, product, onClose, onAddToCart }) => (
+  <Modal visible={visible} transparent animationType="slide">
+    <View style={styles.modalContainer}>
+      <View style={styles.modalContent}>
+        <Text style={styles.productName}>{product.name}</Text>
+        <Text style={styles.productDescription}>{product.description}</Text>
+        <Text style={styles.productPrice}>Price: ${product.price}</Text>
+        <View style={styles.buttonContainer}>
+          <Button title="Add to Cart" onPress={onAddToCart} />
+          <Button title="Cancel" onPress={onClose} />
+        </View>
+      </View>
+    </View>
+  </Modal>
+);
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalContent: {
+    width: 300,
+    padding: 20,
+    backgroundColor: 'white',
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  productName: { fontSize: 20, fontWeight: 'bold' },
+  productDescription: { fontSize: 16, marginVertical: 10 },
+  productPrice: { fontSize: 18, color: '#333' },
+  buttonContainer: { flexDirection: 'row', marginTop: 15 },
+});
+
+export default ProductModal;