react_native/donutshop/app/components/PaymentOption.tsx

40 lines
No EOL
1.2 KiB
TypeScript

import { Image, StyleSheet, Text, View } from 'react-native'
import React from 'react'
interface PaymentOptionProps{
paymentMethod: string;
name: string;
icon: any;
iconStatus: boolean;
}
const PaymentOption: React.FC<PaymentOptionProps> = ({
paymentMethod,
name,
icon,
iconStatus,
}) => {
return (
<View style={{borderRadius: 5, borderWidth: 1, backgroundColor: paymentMethod == name ? '#FFE6E6' : 'transparent', borderColor: paymentMethod == name ? '#DA7297' : '#A9A9A9'}}>
{iconStatus ? (
<View style={{padding: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
<Text style={{color: '#DA7297', fontWeight: 500, fontSize: 16}}>{name}</Text>
<Image source={icon} style={{height: 35, width: 200}}/>
</View>
):(
<View style={{padding: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
<Text style={{color: '#DA7297', fontWeight: 500, fontSize: 16}}>{name}</Text>
<Image source={icon} style={{height: 35, width: 60}}/>
</View>
)}
</View>
)
}
export default PaymentOption
const styles = StyleSheet.create({})