diff options
Diffstat (limited to 'src/screens/Cart/CartScreen.js')
-rw-r--r-- | src/screens/Cart/CartScreen.js | 55 |
1 files changed, 48 insertions, 7 deletions
diff --git a/src/screens/Cart/CartScreen.js b/src/screens/Cart/CartScreen.js index 392e665..b8ca0e4 100644 --- a/src/screens/Cart/CartScreen.js +++ b/src/screens/Cart/CartScreen.js @@ -1,5 +1,5 @@ import React, { useContext } from 'react'; -import { View, Text, Button } from 'react-native'; +import { View, Text, Button, StyleSheet, ScrollView } from 'react-native'; import { CartContext } from '../../context/CartContext'; const CartScreen = ({ navigation }) => { @@ -8,16 +8,57 @@ const CartScreen = ({ navigation }) => { const handleCheckout = () => navigation.navigate('Checkout'); return ( - <View> + <ScrollView contentContainerStyle={styles.container}> {cart.map((item, index) => ( - <View key={index}> - <Text>{item.name} - Quantity: {item.quantity}</Text> - <Button title="Increase Quantity" onPress={() => updateQuantity(item.id, item.quantity + 1)} /> + <View key={index} style={styles.itemContainer}> + <Text style={styles.itemText}>{item.name}</Text> + <Text style={styles.quantityText}>Quantity: {item.quantity}</Text> + <Button + title="Increase Quantity" + onPress={() => updateQuantity(item.id, item.quantity + 1)} + /> </View> ))} - <Button title="Proceed to Checkout" onPress={handleCheckout} /> - </View> + <View style={styles.checkoutButton}> + <Button title="Proceed to Checkout" onPress={handleCheckout} /> + </View> + </ScrollView> ); }; +const styles = StyleSheet.create({ + container: { + padding: 16, + backgroundColor: '#f8f9fa', + }, + itemContainer: { + backgroundColor: '#ffffff', + padding: 16, + borderRadius: 8, + marginBottom: 12, + elevation: 2, // for subtle shadow on Android + shadowColor: '#000', // for iOS shadow + shadowOpacity: 0.2, + shadowRadius: 3, + shadowOffset: { width: 1, height: 2 }, + }, + itemText: { + fontSize: 18, + fontWeight: 'bold', + color: '#333', + marginBottom: 4, + }, + quantityText: { + fontSize: 16, + color: '#666', + marginBottom: 8, + }, + checkoutButton: { + marginTop: 20, + paddingVertical: 10, + borderRadius: 8, + }, +}); + export default CartScreen; + |