crazycharge-app/component/chargingPage/chargingPage.tsx

import { View, Text, ScrollView, StyleSheet, Image } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import Svg, { Path } from 'react-native-svg';
import RippleEffectBatteryIcon from '../global/rippleEffectBatteryIcon';
import LoadingDots from '../global/loadingDots';
import NormalButton from '../global/normal_button';

const LightingLogoSvg = () => (
    <Svg width="21" height="30" viewBox="0 0 21 30" fill="none">
        <Path
            d="M5.75631 29.8077L7.42297 18.3333H0.3396L12.8076 0.352539H13.5768L11.9422 13.3333H20.2756L6.52552 29.8077H5.75631Z"
            fill="#02677D"
        />
    </Svg>
);

const BatteryIconSvg = () => (
    <Svg width="20" height="31" viewBox="0 0 20 31" fill="none">
        <Path
            d="M15.1282 30.8013V26.4103H12.5641L16.5384 19.1987V23.5898H19.1026L15.1282 30.8013ZM1.98716 30C1.60574 30 1.28603 29.871 1.02803 29.613C0.770005 29.355 0.640991 29.0353 0.640991 28.6539V3.81408C0.640991 3.4327 0.770005 3.11299 1.02803 2.85496C1.28603 2.59696 1.60574 2.46796 1.98716 2.46796H4.67949V0H10.3205V2.46796H13.0194C13.4018 2.46796 13.7206 2.59696 13.9759 2.85496C14.2313 3.11299 14.359 3.4327 14.359 3.81408V15.3205C11.9872 15.6261 9.99466 16.68 8.38141 18.4824C6.76816 20.2847 5.96153 22.4252 5.96153 24.9038C5.96153 25.8398 6.0876 26.7383 6.33974 27.5994C6.59188 28.4605 6.96046 29.2607 7.44549 30H1.98716Z"
            fill="#02677D"
        />
    </Svg>
);

const TemperatureIconSvg = () => (
    <Svg width="15" height="30" viewBox="0 0 15 30" fill="none">
        <Path
            d="M7.50004 30C5.64321 30 4.06789 29.3531 2.77408 28.0593C1.48028 26.7655 0.833374 25.1902 0.833374 23.3333C0.833374 22.1282 1.13037 21.0187 1.72437 20.0048C2.3184 18.9909 3.13251 18.1773 4.16671 17.5641V3.33333C4.16671 2.39317 4.48722 1.60257 5.12825 0.961543C5.76928 0.320515 6.55987 0 7.50004 0C8.44021 0 9.2308 0.320515 9.87183 0.961543C10.5129 1.60257 10.8334 2.39317 10.8334 3.33333V17.5641C11.8676 18.1773 12.6817 18.9909 13.2757 20.0048C13.8697 21.0187 14.1667 22.1282 14.1667 23.3333C14.1667 25.1902 13.5198 26.7655 12.226 28.0593C10.9322 29.3531 9.35687 30 7.50004 30ZM5.83337 13.9744H9.16671V11.4744H7.50004V10.1923H9.16671V6.47438H7.50004V5.19229H9.16671V3.33333C9.16671 2.86111 9.00698 2.46528 8.68754 2.14583C8.3681 1.82639 7.97226 1.66667 7.50004 1.66667C7.02782 1.66667 6.63198 1.82639 6.31254 2.14583C5.9931 2.46528 5.83337 2.86111 5.83337 3.33333V13.9744Z"
            fill="#02677D"
        />
    </Svg>
);

const ChargingPage = () => {
    return (
        <SafeAreaView
            style={{ flex: 1, backgroundColor: 'white' }}
            edges={['top', 'left', 'right']}
        >
            <ScrollView className="flex-1">
                <View className="h-[130vh] 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/car1.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="h-[8%] min-h-[20px] border-slate-300 rounded-2xl justify-center"
                        style={{ borderWidth: 1 }}
                    >
                        <View className="mx-[5%] 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="h-[10%]  border-slate-300 rounded-2xl justify-center pl-4"
                        style={{ borderWidth: 1 }}
                    >
                        <Text className="text-lg ">其他資訊</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 className="w-full ">
                        <NormalButton
                            onPress={() => {
                                console.log('完成充電');
                            }}
                            title={
                                <Text
                                    className="text-xl text-white"
                                    style={{ fontWeight: 900 }}
                                >
                                    完成充電
                                </Text>
                            }
                        />
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

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