crazycharge-app/component/global/expectedFeeBox.tsx

import { View, Text, StyleProp, ViewStyle } from 'react-native';
import React from 'react';

interface ExpectedFeeBoxProps {
    extendedStyle?: StyleProp<ViewStyle>;
}
// SearchPage: React.FC<SearchPageProps>
//this is a reuseable component "預計充電費用" 灰色格仔 on Charging Page
const ExpectedFeeBox: React.FC<ExpectedFeeBoxProps> = ({ extendedStyle }) => {
    return (
        <View
            className=" min-h-[20px]  border-slate-300 rounded-2xl justify-center"
            style={[{ borderWidth: 1 }, extendedStyle]}
        >
            <View className="flex-row items-center justify-between">
                <View>
                    <Text className="text-lg">預計充電費用</Text>
                    <Text className="text-base color-[#888888]">
                        按每度電結算: 50 kWh
                    </Text>
                </View>
                <Text className="text-3xl">HK$ 175</Text>
            </View>
        </View>
    );
};

export default ExpectedFeeBox;