crazycharge-app/component/global/couponTabView.tsx

//the size of the TabView will follow its parent-container's size.

import * as React from 'react';
import {
    View,
    Text,
    useWindowDimensions,
    StyleSheet,
    ImageSourcePropType,
    ScrollView
} from 'react-native';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';

import { IndividualCouponComponent } from '../accountPages/walletPageComponent';

export interface TabItem {
    imgURL: ImageSourcePropType;
    date: string;
    time: string;
    chargeStationName: string;
    chargeStationAddress: string;
    distance: string;
}

interface TabViewComponentProps {
    titles: string[];
}

const expiredCoupons = [
    {
        title: 'abc優惠券',
        price: '999',
        detail: '這是一段有關迎新優惠券的說明',
        date: '至14/3/2025'
    },
    {
        title: 'abc優惠券',
        price: '888',
        detail: '這是另一段有關迎新優惠券的說明',
        date: '至15/4/2025'
    },
    {
        title: 'abc優惠券',
        price: '777',
        detail: '這是第三段有關迎新優惠券的說明',
        date: '至16/9/2026'
    },
    {
        title: 'abc優惠券',
        price: '777',
        detail: '這是第三段有關迎新優惠券的說明',
        date: '至16/9/2026'
    },
    {
        title: 'abc優惠券',
        price: '777',
        detail: '這是第三段有關迎新優惠券的說明',
        date: '至16/9/2026'
    },
    {
        title: 'abc優惠券',
        price: '777',
        detail: '這是第三段有關迎新優惠券的說明',
        date: '至16/9/2026'
    }
    // Add more coupon objects as needed
];

const coupons = [
    {
        title: '迎新優惠券',
        price: '111',
        detail: 'aaaaasdasdasdasd',
        date: '至14/3/2025'
    },
    {
        title: '折扣優惠券',
        price: '222',
        detail: 'dfgdfgdfgdfg',
        date: '至15/4/2025'
    },
    {
        title: '三張優惠券',
        price: '333',
        detail: 'zxczxczxczxczxc',
        date: '至16/9/2026'
    }
];
const CouponTabViewComponent: React.FC<TabViewComponentProps> = ({
    titles
}) => {
    const layout = useWindowDimensions();

    //tab 1
    const FirstRoute = () => (
        <ScrollView style={{ flex: 1, backgroundColor: 'white', marginTop: 14 }}>
            <View className="flex-1 flex-col">
                {coupons.map((coupon, index) => (
                    <IndividualCouponComponent
                        key={index}
                        title={coupon.title}
                        price={coupon.price}
                        detail={coupon.detail}
                        date={coupon.date}
                    />
                ))}
            </View>
        </ScrollView>
    );

    //tab 2
    const SecondRoute = () => (
        <ScrollView style={{ flex: 1, backgroundColor: 'white', marginTop: 14 }}>
            <View className="flex-1 flex-col">
                {expiredCoupons.map((coupon, index) => (
                    <IndividualCouponComponent
                        key={index}
                        title={coupon.title}
                        price={coupon.price}
                        detail={coupon.detail}
                        date={coupon.date}
                    />
                ))}
            </View>
        </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 ? '#025c72' : '#888888',
                        fontWeight: focused ? '900' : 'thin',
                        fontSize: 20
                    }}
                >
                    {route.title}
                </Text>
            )}
            indicatorStyle={{
                backgroundColor: '#025c72'
            }}
            style={{
                backgroundColor: 'white',
                borderColor: '#DBE4E8',
                elevation: 0,
                marginHorizontal: 15,
                borderBottomWidth: 0.5
            }}
        />
    );
    return (
        <TabView
            navigationState={{ index, routes }}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={{ width: layout.width }}
            renderTabBar={renderTabBar}
        />
    );
};
export default CouponTabViewComponent;

const styles = StyleSheet.create({
    container: { flexDirection: 'row' },
    image: { width: 100, height: 100, margin: 15, borderRadius: 10 },
    textContainer: { flexDirection: 'column', gap: 8, marginTop: 20 }
});