aswi2023one-team-to-rule-them-all-gitlab/src/components/item/ItemTabBar.tsx @ faf84222

import { HStack, CircleIcon, View, ScrollView, Button, Center, Heading, Pressable, Text, Box } from "native-base";
import { CertaintyWithColors } from "../../stores/reducers/itemSlice";
import { Concordance } from "../../types/item";
import LoadingBox from "../loading/LoadingBox";

// custom render Tab
const ItemTabBar = (props: { navigationState: { routes: any[] }, concordances: Concordance[], index: number, onIndexChange: any }) => {

    const { concordances, onIndexChange, index } = props

    if (concordances && concordances.length > 0) {
        return (
            <View h="16">
                <ScrollView width="100%" horizontal={true}>
                    {props.navigationState.routes.length > 100 ? (
                        <HStack>
                            {props.navigationState.routes.map((route, i) => {
                                return (
                                    <Button
                                        size="lg"
                                        key={i}
                                        variant={index == i ? "subtle" : "outline"}
                                        rightIcon={
                                            <CircleIcon
                                                size="2"
                                                color={CertaintyWithColors[concordances[i].cert].color}
                                            />
                                        }
                                        onPress={() => onIndexChange(i)}
                                    >
                                        {concordances[i].id}
                                    </Button>
                                );
                            })}
                        </HStack>
                    ) : (
                        // One item only
                        <Pressable size="96" variant="outline"
                            onPress={() => onIndexChange(0)}
                        >
                            <Box  width="100%" background="red.100">
                                <Text>{concordances[0].id}</Text>
                                <CircleIcon
                                                size="2"
                                                color={CertaintyWithColors[concordances[0].cert].color}
                                            />
                            </Box >
                        </Pressable>
                    )}
                </ScrollView>
            </View>
        );
    }
    else {
        return <LoadingBox text={`Loading concordances...`}></LoadingBox>
    }
};

export default ItemTabBar