79 lines
No EOL
2.8 KiB
TypeScript
79 lines
No EOL
2.8 KiB
TypeScript
import { ImageBackground, ImageProps, Pressable, StyleSheet, Text, View } from 'react-native'
|
|
import React from 'react'
|
|
import { AntDesign } from '@expo/vector-icons';
|
|
|
|
|
|
interface FavImgBackgroundProps {
|
|
EnableBackHandler: boolean;
|
|
id: string;
|
|
image_item: ImageProps;
|
|
name: string;
|
|
donutname: string;
|
|
type: string;
|
|
calories: string;
|
|
average_rating: number;
|
|
ratings_count: string;
|
|
description: string;
|
|
favourite: boolean;
|
|
ToggleFavourite: any;
|
|
BackHandler?: any;
|
|
}
|
|
|
|
|
|
const FavImgBackground: React.FC<FavImgBackgroundProps> = ({
|
|
EnableBackHandler,
|
|
id,
|
|
image_item,
|
|
name,
|
|
donutname,
|
|
calories,
|
|
type,
|
|
average_rating,
|
|
ratings_count,
|
|
description,
|
|
favourite,
|
|
ToggleFavourite,
|
|
BackHandler,
|
|
|
|
}) => {
|
|
|
|
return (
|
|
<View>
|
|
<ImageBackground source={image_item} style={{width: '100%', aspectRatio: 1, justifyContent: 'space-between', }}>
|
|
{EnableBackHandler? (
|
|
<View style={{padding: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',}}>
|
|
<Pressable onPress={() => {BackHandler()}}>
|
|
<AntDesign name="left" size={24} color="gray" />
|
|
</Pressable>
|
|
<Pressable onPress={() => {ToggleFavourite(favourite, type, id);}}>
|
|
<AntDesign name="heart" size={24} color="#EF5A6F" />
|
|
</Pressable>
|
|
</View>
|
|
):(
|
|
<View style={{padding: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end',}}>
|
|
<Pressable onPress={() => {ToggleFavourite(favourite, type, id);}}>
|
|
<AntDesign name="heart" size={24} color="#EF5A6F" />
|
|
</Pressable>
|
|
</View>
|
|
)}
|
|
<View style={{paddingVertical: 10, paddingHorizontal: 10, backgroundColor: 'rgba(255, 255, 255, 0.8)', borderTopLeftRadius: 10, borderTopRightRadius: 10}}>
|
|
<View style={{marginHorizontal: 10, marginVertical: 10}}>
|
|
<Text style={{color: '#DA7297', fontSize: 22, fontWeight: 500}}>{donutname || name}</Text>
|
|
</View>
|
|
<View style={{flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 10, marginVertical: 10}}>
|
|
<Text style={{color: '#DA7297', fontSize: 18}}>{calories} calories</Text>
|
|
<View style={{flexDirection: 'row', gap: 3, alignItems: 'center'}}>
|
|
<AntDesign name="star" size={20} color="#EF5A6F"/>
|
|
<Text style={{color: '#DA7297', textAlign: 'right', fontSize: 18}}>{average_rating}</Text>
|
|
<Text style={{color: 'gray', fontSize: 12}}>({ratings_count})</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</ImageBackground>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default FavImgBackground
|
|
|
|
const styles = StyleSheet.create({}) |