98 lines
No EOL
5.1 KiB
TypeScript
98 lines
No EOL
5.1 KiB
TypeScript
import { Image, ImageProps, Pressable, StyleSheet, Text, View } from 'react-native'
|
|
import React from 'react'
|
|
import { AntDesign } from '@expo/vector-icons';
|
|
|
|
|
|
interface CartItemProps{
|
|
id: string;
|
|
name: string;
|
|
donutname: string;
|
|
prices: any;
|
|
type: string;
|
|
image_item: ImageProps;
|
|
addCartItemQuantityHandler: any;
|
|
removeCartItemQuantityHandler: any;
|
|
}
|
|
|
|
|
|
const CartItem:React.FC<CartItemProps> = ({
|
|
id,
|
|
name,
|
|
donutname,
|
|
prices,
|
|
type,
|
|
image_item,
|
|
addCartItemQuantityHandler,
|
|
removeCartItemQuantityHandler,
|
|
}) => {
|
|
|
|
return (
|
|
<View>
|
|
{prices.length != 1 ? (
|
|
<View style={{flex: 1, gap: 10, padding: 10, borderRadius: 10, borderColor: '#DA7297', borderWidth: 1}}>
|
|
<View style={{flex:1, flexDirection: 'row', gap: 10}}>
|
|
<Image source={image_item} style={{height: 80, width: 80}}/>
|
|
<View style={{flex:1, paddingVertical: 5, justifyContent: 'space-between'}}>
|
|
<View>
|
|
<Text style={{fontSize: 16, color: '#EF5A6F', fontWeight: 500, marginBottom: 10}}>{name || donutname}</Text>
|
|
</View>
|
|
{prices.map((data: any, index: any) => (
|
|
<View key={index.toString()} style={{flex: 1, justifyContent: 'center', alignItems: 'center', flexDirection: 'row', gap: 20}}>
|
|
<View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row'}}>
|
|
<View style={{padding: 10, justifyContent: 'center', alignItems: 'center'}}>
|
|
<Text style={{fontSize: type == 'Drink' ? 16 : 18}}>{data.size}</Text>
|
|
</View>
|
|
<Text style={{fontSize: 16, color: '#EF5A6F'}}>{data.currency}{data.price}</Text>
|
|
</View>
|
|
<View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row'}}>
|
|
<Pressable onPress={() => {removeCartItemQuantityHandler(id, data.size)}}>
|
|
<AntDesign name="minussquare" size={30} color="#DA7297" />
|
|
</Pressable>
|
|
<View style={{padding: 2, borderColor: '#DA7297', borderWidth: 2, width: 30, alignItems: 'center'}}>
|
|
<Text>{data.quantity}</Text>
|
|
</View>
|
|
<Pressable onPress={() => {addCartItemQuantityHandler(id, data.size)}}>
|
|
<AntDesign name="plussquare" size={30} color="#DA7297" />
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
) : (
|
|
<View style={{flexDirection: 'row', gap: 10, padding: 10, borderRadius: 10, borderColor: '#DA7297', borderWidth: 1}}>
|
|
<View>
|
|
<Image source={image_item} style={{height: 80, width: 80}}/>
|
|
</View>
|
|
<View style={{flex: 1}}>
|
|
<Text style={{fontSize: 16, color: '#EF5A6F', fontWeight: 500, marginBottom: 10}}>{name || donutname}</Text>
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', flexDirection: 'row', gap: 20}}>
|
|
<View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row'}}>
|
|
<View style={{padding: 10, justifyContent: 'center', alignItems: 'center'}}>
|
|
<Text style={{fontSize: type == 'Drink' ? 14 : 16}}>{prices[0].size}</Text>
|
|
</View>
|
|
<Text style={{fontSize: 16, color: '#EF5A6F'}}>{prices[0].currency}{prices[0].price}</Text>
|
|
</View>
|
|
<View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row'}}>
|
|
<Pressable onPress={() => {removeCartItemQuantityHandler(id, prices[0].size)}}>
|
|
<AntDesign name="minussquare" size={30} color="#DA7297" />
|
|
</Pressable>
|
|
<View style={{padding: 2, borderColor: '#DA7297', borderWidth: 2, width: 30, alignItems: 'center'}}>
|
|
<Text>{prices[0].quantity}</Text>
|
|
</View>
|
|
<Pressable onPress={() => {addCartItemQuantityHandler(id, prices[0].size)}}>
|
|
<AntDesign name="plussquare" size={30} color="#DA7297" />
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default CartItem
|
|
|
|
const styles = StyleSheet.create({}) |