crazycharge-app/component/chargingPage/chargingPageComponent.tsx

import { View, Text, ScrollView, StyleSheet, Image } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import RippleEffectBatteryIcon from '../global/rippleEffectBatteryIcon';
import LoadingDots from '../global/loadingDots';
import NormalButton from '../global/normal_button';
import { router } from 'expo-router';
import { BatteryIconSvg, LightingLogoSvg, TemperatureIconSvg } from '../global/SVG';

const ChargingPageComponent = () => {
    return (
        <SafeAreaView
            style={{ flex: 1, backgroundColor: 'white' }}
            edges={['top', 'left', 'right']}
        >
            <ScrollView className="flex-1">
                <View className="flex-1 mx-[5%] space-y-4">
                    <View className="items-center">
                        <View className="mt-6 mb-4">
                            <Text className="text-lg ">現正充電中:</Text>
                        </View>
                        <Text className="text-4xl font-light">
                            TESLA Model 3
                        </Text>
                    </View>

                    <View className="items-center">
                        <Text className="text-lg" style={styles.grayColor}>
                            充電中
                        </Text>
                        <View className="flex-row space-x-4 p-4 pr-8 items-center">
                            <RippleEffectBatteryIcon />
                            <Text
                                style={{
                                    color: '#02677D',
                                    fontSize: 60,
                                    fontWeight: 300
                                }}
                            >
                                55%
                                <LoadingDots />
                            </Text>
                        </View>
                        <Text className="text-lg mb-6" style={styles.grayColor}>
                            尚餘時間 ~48 mins
                        </Text>
                        <View className="mb-[-10] items-center justify-center ">
                            <Image
                                source={require('../../assets/car.png')}
                                style={{ width: 430, height: 200 }}
                                resizeMode="contain"
                            />
                        </View>
                    </View>

                    <View
                        className="h-[220px] min-h-[20px] border-slate-300 rounded-2xl flex-column"
                        style={{ borderWidth: 1 }}
                    >
                        {/* Top */}
                        <View className="h-[65%] flex-row justify-evenly items-center">
                            <View className="flex-1 flex-column items-center space-y-2">
                                <LightingLogoSvg />
                                <Text
                                    style={styles.grayColor}
                                    className="text-base"
                                >
                                    充電功率
                                </Text>
                                <Text
                                    style={styles.greenColor}
                                    className="font-bold text-base"
                                >
                                    22.1kW
                                </Text>
                            </View>
                            <View className="flex-1 flex-column items-center space-y-2">
                                <BatteryIconSvg />
                                <Text
                                    style={styles.grayColor}
                                    className="text-base"
                                >
                                    實際功率
                                </Text>
                                <Text
                                    style={styles.greenColor}
                                    className="font-bold text-base"
                                >
                                    30.0kW
                                </Text>
                            </View>
                            <View className="flex-1 flex-column items-center space-y-2">
                                <TemperatureIconSvg />
                                <Text
                                    style={styles.grayColor}
                                    className="text-base"
                                >
                                    溫度
                                </Text>
                                <Text
                                    style={styles.greenColor}
                                    className="font-bold text-base"
                                >
                                    36°c
                                </Text>
                            </View>
                        </View>
                        <View className="mx-[5%]">
                            <View className="h-[1px] w-[100%] bg-[#CCCCCC]" />
                        </View>
                        {/* bottom container */}
                        <View className="h-[35%] mx-[5%] justify-center ">
                            <Text
                                style={styles.grayColor}
                                className="text-base"
                            >
                                充電歷時 ~12mins
                            </Text>
                        </View>
                    </View>

                    <View
                        className="min-h-[20px] border-slate-300 rounded-2xl justify-center p-4"
                        style={{ borderWidth: 1 }}
                    >
                        <View className="flex-row items-center justify-between ">
                            <View>
                                <Text className="text-lg">預計充電費用</Text>

                                <Text
                                    className="text-base"
                                    style={styles.grayColor}
                                >
                                    按每度電結算: 50 kWh
                                </Text>
                            </View>
                            <Text className="text-3xl">HK$ 175</Text>
                        </View>
                    </View>

                    <View
                        className="border-slate-300 rounded-2xl justify-center p-4"
                        style={{ borderWidth: 1 }}
                    >
                        <Text className="text-lg pb-1 ">其他資訊</Text>
                        <View className="flex-row">
                            <View className="flex-1 flex-column">
                                <Text
                                    className="text-base"
                                    style={styles.grayColor}
                                >
                                    開始時間
                                </Text>
                                <Text className="text-base">16:33:04</Text>
                            </View>
                            <View className="flex-1 flex-column">
                                <Text
                                    className="text-base"
                                    style={styles.grayColor}
                                >
                                    充電座
                                </Text>
                                <Text className="text-base">A104</Text>
                            </View>
                        </View>
                    </View>

                    <View>
                        <NormalButton
                            onPress={() => {
                              router.push('/paymentSummaryPage')
                            }}
                            title={
                                <Text
                                    className="text-xl text-white"
                                    style={{ fontWeight: 900 }}
                                >
                                    完成充電
                                </Text>
                            }
                        />
                    </View>
                    <View>
                        <NormalButton
                            onPress={() => {
                                router.push('/chargingPenaltyPage')
                            }}
                            title={
                                <Text
                                    className="text-xl text-white"
                                    style={{ fontWeight: 900 }}
                                >
                                    OTHER PAGE DEMO
                                </Text>
                            }
                        />
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default ChargingPageComponent;
const styles = StyleSheet.create({
    grayColor: {
        color: '#888888'
    },
    greenColor: {
        color: '#02677D'
    },
    text: {
        fontWeight: 300,
        color: '#000000'
    }
});