57 lines
No EOL
2 KiB
TypeScript
57 lines
No EOL
2 KiB
TypeScript
import { Dimensions, ImageBackground, ImageProps, Pressable, StyleSheet, Text, View } from 'react-native'
|
|
import React from 'react'
|
|
import { AntDesign, MaterialIcons} from '@expo/vector-icons';
|
|
|
|
|
|
const card_width = Dimensions.get('window').width * 0.3;
|
|
|
|
interface donutCardProps {
|
|
id: string;
|
|
index: number;
|
|
type: string;
|
|
donutname: string;
|
|
name: string;
|
|
image_item: ImageProps;
|
|
average_rating: number;
|
|
price: any;
|
|
buttonPressHandler: any;
|
|
}
|
|
|
|
const MenuCard:React.FC<donutCardProps> = ({
|
|
id,
|
|
index,
|
|
type,
|
|
name,
|
|
donutname,
|
|
image_item,
|
|
average_rating,
|
|
price,
|
|
buttonPressHandler,
|
|
}) => {
|
|
|
|
return (
|
|
<View style={{justifyContent: 'space-between', borderWidth: 1, borderRightColor: '#DA7297', borderLeftColor: '#DA7297', borderTopColor: '#DA7297', borderBottomColor: '#DA7297', padding: 10, borderRadius: 10, height: 250, width: 150}}>
|
|
<View>
|
|
<ImageBackground source={image_item} style={{width:card_width, height: card_width, overflow: 'hidden'}} resizeMode= "contain">
|
|
<View style={{flexDirection: 'row', gap: 3}}>
|
|
<AntDesign name="star" size={16} color="#DA7297"/>
|
|
<Text style={{color: '#EF5A6F', textAlign: 'right'}}>{average_rating}</Text>
|
|
</View>
|
|
</ImageBackground>
|
|
<View style={{margin: 10}}>
|
|
<Text style={{textAlign: 'center', color: '#DA7297', fontWeight: 500}}>{donutname}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
|
|
<Text style={{fontWeight: 600, color: '#EF5A6F'}}>$<Text>{price.price}</Text></Text>
|
|
<Pressable onPress={() => {buttonPressHandler({id, index, type, image_item, donutname, prices:[{...price, quantity:1}]})}}>
|
|
<MaterialIcons name="add-circle" size={24} color="#EF5A6F" />
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default MenuCard
|
|
|
|
const styles = StyleSheet.create({}) |