react_native/donutshop/app/components/PaymentFooter.tsx

42 lines
No EOL
1.1 KiB
TypeScript

import { Pressable, StyleSheet, Text, View } from 'react-native'
import React from 'react'
interface PriceProps{
price: string;
currency: string;
}
interface PaymentProps{
price: PriceProps;
buttonPressHandler: any;
buttonTitle: string;
}
const PaymentFooter: React.FC<PaymentProps> = ({
price,
buttonPressHandler,
buttonTitle,
}) => {
return (
<View style={{padding: 10, marginHorizontal: 10, marginVertical: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
<View style={{flex: 1, marginHorizontal: 10}}>
<Text style={{color: 'gray', marginBottom: 3}}>Price</Text>
<Text style={{fontSize: 22, color: '#EF5A6F', fontWeight: 500}}>{price.currency}{price.price}</Text>
</View>
<View style={{flex: 2, backgroundColor: '#DA7297', padding: 15, alignItems: 'center', borderRadius: 5}}>
<Pressable onPress={() => buttonPressHandler()}>
<Text style={{color: 'white', fontSize: 16, fontWeight: 500}}>{buttonTitle}</Text>
</Pressable>
</View>
</View>
)
}
export default PaymentFooter
const styles = StyleSheet.create({})