aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/components/ProductModal.js40
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;