crazycharge-app/component/accountPages/myVehiclePageComponent.tsx

import { router } from 'expo-router';
import {
    View,
    Text,
    ScrollView,
    Pressable,
    Image,
    Dimensions,
    ImageBackground
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { CrossLogoSvg, GreenStarSvg, RightArrowIconSvg } from '../global/SVG';
import NormalButton from '../global/normal_button';

const VehicleRowComponent = ({
    deviceWidth,
    deviceHeight
}: {
    deviceWidth: number;
    deviceHeight: number;
}) => (
    <Pressable onPress={() => router.push('manageVehiclePage')}>
        <View
            className="rounded-xl overflow-hidden mb-3"
            style={{
                width: deviceWidth * 0.9,
                height: deviceHeight * 0.12
            }}
        >
            <ImageBackground
                source={require('../../assets/myVehicleBackground.png')}
                resizeMode="cover"
                className="flex-1 flex-row items-center justify-between "
            >
                <Image
                    style={{
                        marginTop: 15,
                        marginLeft: 5,
                        width: deviceWidth * 0.35,
                        height: '100%'
                    }}
                    resizeMode="contain"
                    source={require('../../assets/car1.png')}
                    className=""
                />
                <View
                    className="flex-col "
                    style={{
                        paddingRight: deviceHeight < 600 ? 80 : 100
                    }}
                >
                    <Text
                        style={{
                            fontSize: deviceHeight < 600 ? 18 : 22,
                            fontWeight: '600'
                        }}
                    >
                        TESLA
                    </Text>
                    <Text style={{ fontSize: deviceHeight < 600 ? 14 : 18 }}>
                        Model S
                    </Text>
                    <Text
                        style={{
                            fontSize: deviceHeight < 600 ? 12 : 16,
                            color: '#02677D'
                        }}
                        className=" text-[#02677D]"
                    >
                        BF0992
                    </Text>
                </View>
                <View className="pr-3">
                    <RightArrowIconSvg />
                </View>
            </ImageBackground>
        </View>
    </Pressable>
);

const MyVehiclePageComponent = () => {
    const { height: deviceHeight, width: deviceWidth } =
        Dimensions.get('window');
    console.log(deviceHeight, deviceWidth);
    return (
        <SafeAreaView
            className="flex-1 bg-white"
            edges={['top', 'right', 'left']}
        >
            <ScrollView
                showsVerticalScrollIndicator={false}
                className="flex-1 mx-[5%]"
            >
                <View style={{ marginTop: 25 }}>
                    <Pressable
                        className="self-start"
                        onPress={() => {
                            if (router.canGoBack()) {
                                router.back();
                            } else {
                                router.replace('/accountMainPage');
                            }
                        }}
                    >
                        <CrossLogoSvg />
                    </Pressable>
                    <Text
                        style={{
                            fontSize: 45,
                            marginTop: 25,
                            marginBottom: 10
                        }}
                    >
                        我的車輛
                    </Text>
                </View>
                <View className="items-center ">
                    <Image
                        source={require('../../assets/car.png')}
                        resizeMode="contain"
                        style={{
                            width: deviceWidth * 0.8,
                            height: deviceHeight * 0.25
                        }}
                    />
                </View>
                <View className="flex-row space-x-2 ">
                    <View
                        style={{
                            width: 4,
                            height: '100%',
                            backgroundColor: '#02677D'
                        }}
                    />
                    <View>
                        <View className="flex-row items-center">
                            <Text className="text-lg text-[#02677D]">
                                預設車輛
                            </Text>
                            <GreenStarSvg />
                        </View>
                        <Text className="text-2xl">TESLA Model 3</Text>
                        <Text className="text-lg text-[#888888]">CE1107</Text>
                    </View>
                </View>
                <View className="w-full h-1 my-4 bg-[#DBE4E8]" />

                <Text className="text-xl mb-4">其他車輛</Text>
                <VehicleRowComponent
                    deviceHeight={deviceHeight}
                    deviceWidth={deviceWidth}
                />
                <VehicleRowComponent
                    deviceHeight={deviceHeight}
                    deviceWidth={deviceWidth}
                />
                <VehicleRowComponent
                    deviceHeight={deviceHeight}
                    deviceWidth={deviceWidth}
                />
                <NormalButton
                    title={
                        <Text
                            style={{
                                fontWeight: '700',
                                fontSize: 20,
                                color: '#fff'
                            }}
                        >
                            新增車輛
                        </Text>
                    }
                    onPress={() => router.push('addVehiclePage')}
                />
            </ScrollView>
        </SafeAreaView>
    );
};

export default MyVehiclePageComponent;