crazycharge-app/component/resultDetailPage/resultDetailPage.tsx

import {
    View,
    Text,
    ScrollView,
    Image,
    useWindowDimensions,
    StyleSheet,
    Pressable
} from 'react-native';
import React from 'react';

import { SceneMap, TabBar, TabView } from 'react-native-tab-view';
import NormalButton from '../global/normal_button';
import Svg, { Path, Rect } from 'react-native-svg';
import { router } from 'expo-router';

interface ChargingStationTabViewProps {
    titles: string[];
}

const CheckLogoSvg = () => (
    <Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
        <Rect width="20" height="20" rx="10" fill="#02677D" />
        <Path
            d="M7.95837 15L3.20837 10.25L4.39587 9.06251L7.95837 12.625L15.6042 4.97917L16.7917 6.16667L7.95837 15Z"
            fill="white"
        />
    </Svg>
);

const DirectionLogoSvg = () => (
    <Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
        <Path
            d="M6.87502 12.2917H8.12498V9.79166H11.4584V11.5785L13.8702 9.16668L11.4584 6.74685V8.5417H7.62821C7.41481 8.5417 7.23592 8.61358 7.09156 8.75733C6.9472 8.90108 6.87502 9.0792 6.87502 9.29168V12.2917ZM10.0016 17.8045C9.81357 17.8045 9.62831 17.7668 9.44581 17.6915C9.26331 17.6162 9.09655 17.5032 8.94552 17.3525L2.64748 11.0545C2.49684 10.9041 2.38386 10.738 2.30854 10.5562C2.23321 10.3745 2.19554 10.1896 2.19554 10.0016C2.19554 9.81358 2.23321 9.62833 2.30854 9.44583C2.38386 9.26333 2.49684 9.09656 2.64748 8.94554L8.94552 2.64749C9.09594 2.49686 9.26202 2.38388 9.44377 2.30856C9.62552 2.23322 9.8104 2.19556 9.99842 2.19556C10.1864 2.19556 10.3717 2.23322 10.5542 2.30856C10.7367 2.38388 10.9035 2.49686 11.0545 2.64749L17.3525 8.94554C17.5032 9.09595 17.6161 9.26204 17.6915 9.44379C17.7668 9.62554 17.8045 9.81042 17.8045 9.99843C17.8045 10.1864 17.7668 10.3717 17.6915 10.5542C17.6161 10.7367 17.5032 10.9035 17.3525 11.0545L11.0545 17.3525C10.9041 17.5032 10.738 17.6162 10.5562 17.6915C10.3745 17.7668 10.1896 17.8045 10.0016 17.8045ZM6.66667 13.3333L9.82371 16.4904C9.87179 16.5385 9.93056 16.5625 10 16.5625C10.0694 16.5625 10.1282 16.5385 10.1763 16.4904L16.4904 10.1763C16.5385 10.1282 16.5625 10.0695 16.5625 10C16.5625 9.93057 16.5385 9.87181 16.4904 9.82372L10.1763 3.50964C10.1282 3.46156 10.0694 3.43752 10 3.43752C9.93056 3.43752 9.87179 3.46156 9.82371 3.50964L3.50962 9.82372C3.46154 9.87181 3.4375 9.93057 3.4375 10C3.4375 10.0695 3.46154 10.1282 3.50962 10.1763L6.66667 13.3333Z"
            fill="black"
        />
    </Svg>
);

const PreviousPageSvg = () => (
    <Svg width="28" height="28" viewBox="0 0 28 28" fill="none">
        <Path
            d="M7.04166 15.6667L16.375 25L14 27.3334L0.666656 14L14 0.666687L16.375 3.00002L7.04166 12.3334H27.3333V15.6667H7.04166Z"
            fill="white"
        />
    </Svg>
);

const ChargingStationTabView: React.FC<ChargingStationTabViewProps> = ({
    titles
}) => {
    const layout = useWindowDimensions();

    //tab 1
    const FirstRoute = () => (
        <ScrollView style={{ flex: 1, marginHorizontal: '5%' }}>
            <Text className="text-lg" style={styles.text}>
                這是一段有關充電站的說明
            </Text>
        </ScrollView>
    );

    //tab 2
    const SecondRoute = () => (
        <ScrollView style={{ flex: 1, marginHorizontal: '5%' }}>
            <Text className="text-lg " style={styles.text}>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident
            </Text>
        </ScrollView>
    );

    const renderScene = SceneMap({
        firstRoute: FirstRoute,
        secondRoute: SecondRoute
    });
    const [routes] = React.useState([
        { key: 'firstRoute', title: titles[0] },
        { key: 'secondRoute', title: titles[1] }
    ]);
    const [index, setIndex] = React.useState(0);

    const renderTabBar = (props: any) => (
        <TabBar
            {...props}
            renderLabel={({ route, focused }) => (
                <Text
                    style={{
                        color: focused ? '#000000' : '#CCCCCC',
                        fontWeight: focused ? '300' : 'thin',
                        fontSize: 17
                    }}
                >
                    {route.title}
                </Text>
            )}
            indicatorStyle={{
                backgroundColor: '#000000',
                height: 1
            }}
            style={{
                backgroundColor: 'white',

                elevation: 0,
                marginHorizontal: 15,
                borderBottomWidth: 0.5
            }}
        />
    );
    return (
        <TabView
            navigationState={{ index, routes }}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={{ width: layout.width }}
            renderTabBar={renderTabBar}
        />
    );
};

const ResultDetailPage = () => {
    return (
        <ScrollView className="flex-1 bg-white">
            <View className="h-[30vh] relative">
                <Image
                    source={require('../../assets/dummyStationPicture.png')}
                    resizeMode="cover"
                    style={{ flex: 1, width: '100%' }}
                />
                <View className="absolute top-14 left-8 ">
                    <Pressable
                        onPress={() => {
                            if (router.canGoBack()) {
                                router.back();
                            } else {
                                router.replace('./');
                            }
                        }}
                    >
                        <PreviousPageSvg />
                    </Pressable>
                </View>
            </View>
            <View className="h-[40vh] flex-column mx-[5%] mt-[5%]">
                <View>
                    <Text className="text-3xl">上環街市充電站</Text>
                </View>
                <View className="flex-row justify-between items-center">
                    <Text className="text-base" style={{ color: '#888888' }}>
                        香港上環皇后大道中345號
                    </Text>
                    <NormalButton
                        title={
                            <View className="flex-row items-center justify-center text-center space-x-1">
                                <DirectionLogoSvg />
                                <Text className="text-base ">路線</Text>
                            </View>
                        }
                        onPress={() => console.log('abc')}
                        extendedStyle={{
                            backgroundColor: '#E3F2F8',
                            borderRadius: 61,
                            paddingHorizontal: 30,
                            paddingVertical: 10
                        }}
                    />
                </View>
                <View className="flex-row space-x-2 items-center pb-6 ">
                    <CheckLogoSvg />
                    <Text>Walk-In</Text>
                    <Text>400米</Text>
                </View>
                <NormalButton
                    title={
                        <View className="pr-2">
                            <Text
                                style={{
                                    color: '#FFFFFF',
                                    fontWeight: 700,
                                    fontSize: 20
                                }}
                            >
                                ＋ 新增預約
                            </Text>
                        </View>
                    }
                    onPress={() => console.log('ab')}
                    extendedStyle={{ flex: 0.5 }}
                />
                <View
                    className="flex-1 flex-row min-h-[20px] border-slate-300 my-6 rounded-2xl"
                    style={{ borderWidth: 1 }}
                >
                    <View className="flex-1 m-4">
                        <View className="flex-1 flex-row ">
                            <View className=" flex-1 flex-column  justify-between">
                                <Text className="text-xl " style={styles.text}>
                                    收費
                                </Text>

                                <View className="flex-row items-center space-x-2">
                                    <Text className="text-3xl text-[#02677D]">
                                        $20
                                    </Text>
                                    <Text style={styles.text}>每15分鐘</Text>
                                </View>
                            </View>
                            <View className="items-center justify-center">
                                <View className="w-[1px] h-[60%] bg-[#CCCCCC]" />
                            </View>
                            <View className="flex-1 flex-column ">
                                <View className="flex-1"></View>
                                <View className="flex-row items-center ml-4 space-x-2 ">
                                    <Text className="text-3xl text-[#02677D]">
                                        $3.5
                                    </Text>
                                    <Text style={styles.text}>每度電</Text>
                                </View>
                            </View>
                        </View>
                    </View>
                </View>
            </View>
            <View className="h-[30vh] ">
                <Text className="text-xl pb-2 mx-[5%]" style={styles.text}>
                    充電站資訊
                </Text>
                <ChargingStationTabView titles={['充電插頭', '其他']} />
            </View>
        </ScrollView>
    );
};

export default ResultDetailPage;

const styles = StyleSheet.create({
    text: {
        fontWeight: 300,
        color: '#000000'
    }
});