78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { View, Text, Image, TouchableOpacity } from 'react-native';
|
||
import { ProviderCardProps } from './providerCard.props';
|
||
import { getStyles } from './providerCard.styles';
|
||
import { useAppTheme } from '@theme';
|
||
|
||
export const ProviderCard: React.FC<ProviderCardProps> = ({
|
||
imageUrl,
|
||
name,
|
||
rating,
|
||
deliveryTime,
|
||
tag,
|
||
discountText,
|
||
onPress,
|
||
}) => {
|
||
const { colors } = useAppTheme();
|
||
const styles = getStyles(colors);
|
||
const [isFavorite, setIsFavorite] = useState(false);
|
||
|
||
return (
|
||
<TouchableOpacity
|
||
style={styles.container}
|
||
onPress={onPress}
|
||
activeOpacity={0.85}
|
||
>
|
||
<View style={styles.imageWrap}>
|
||
{imageUrl ? (
|
||
<Image
|
||
source={{ uri: imageUrl }}
|
||
style={styles.image}
|
||
resizeMode="cover"
|
||
/>
|
||
) : (
|
||
<View style={styles.imagePlaceholder}>
|
||
<Text style={styles.imagePlaceholderEmoji}>🍽️</Text>
|
||
</View>
|
||
)}
|
||
|
||
{!!discountText && (
|
||
<View style={styles.discountRibbon}>
|
||
<Text style={styles.discountRibbonText}>{discountText}</Text>
|
||
</View>
|
||
)}
|
||
|
||
<TouchableOpacity
|
||
style={styles.favoriteButton}
|
||
activeOpacity={0.7}
|
||
onPress={() => setIsFavorite(prev => !prev)}
|
||
>
|
||
<Text style={styles.favoriteIcon}>{isFavorite ? '❤️' : '🤍'}</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
|
||
<View style={styles.body}>
|
||
<View style={styles.topRow}>
|
||
<Text style={styles.name} numberOfLines={1}>
|
||
{name}
|
||
</Text>
|
||
<View style={styles.ratingPill}>
|
||
<Text style={styles.ratingStar}>⭐</Text>
|
||
<Text style={styles.ratingText}>{rating.toFixed(1)}</Text>
|
||
</View>
|
||
</View>
|
||
|
||
<View style={styles.metaRow}>
|
||
<Text style={styles.metaText}>🕐 {deliveryTime}</Text>
|
||
<View style={styles.metaDivider} />
|
||
<Text style={styles.metaText}>{tag}</Text>
|
||
</View>
|
||
|
||
<View style={styles.tagPill}>
|
||
<Text style={styles.tagPillText}>Free delivery over ₹199</Text>
|
||
</View>
|
||
</View>
|
||
</TouchableOpacity>
|
||
);
|
||
};
|