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

import { HStack, CircleIcon, View, ScrollView, Button } 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 horizontal={true} >
            <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>
          </ScrollView>
        </View>
      )
    else {
      return <LoadingBox text={`Loading concordances...`}></LoadingBox>
    }
  };

  export default ItemTabBar