crazycharge-app/component/global/expectedFeeBox.tsx

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

interface ExpectedFeeBoxProps {
    extendedStyle?: StyleProp<ViewStyle>;
    price: string | number | undefined;
}
// SearchPage: React.FC<SearchPageProps>
//this is a reuseable component "預計充電費用" 灰色格仔 on Charging Page
const ExpectedFeeBox: React.FC<ExpectedFeeBoxProps> = ({ extendedStyle, price }) => {
    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$ {price}</Text>
            </View>
        </View>
    );
};

export default ExpectedFeeBox;

[
    undefined,
    {
        business_hours_fk: 'test',
        createdAt: '2024-07-11T09:58:53.871Z',
        id: '2405311022116801000',
        image: ' ',
        price: 3,
        qr_code: 'test',
        self_active_status_fk: 'test',
        snapshot: {
            Address: '香港觀塘偉業街143號',
            AreaCode: '810000',
            BusineHours: '24小时营业',
            Construction: 3,
            CountryCode: 'CN',
            ElectricityFee: '',
            EquipmentInfos: [Array],
            EquipmentOwnerID: '730998640',
            MatchCars: '限小型车辆',
            OperatorID: '192316877',
            ParkFee: '首小时5元，之后1元/小时',
            ParkInfo: '地面1层',
            ParkNums: 20,
            Payment: '微信/云闪付/智能卡/VIN码',
            Remark: '',
            ServiceFee: '',
            ServiceTel: '13410029675',
            SiteGuide: '香港觀塘偉業街143號',
            StationID: '2405311022116801000',
            StationLat: 22.310709,
            StationLng: 114.22301,
            StationName: 'CRAZY CHARGE (偉業街）',
            StationStatus: 50,
            StationTel: '13823514949',
            StationType: 1,
            SupportOrder: 0
        },
        updatedAt: '2024-08-16T08:18:07.976Z'
    }
];