@chakra-ui/react#Tabs TypeScript Examples

The following examples show how to use @chakra-ui/react#Tabs. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: TrackPage.tsx    From takeout-app with MIT License 6 votes vote down vote up
TrackPageSkeleton: React.FC = () => {
  return (
    <Tabs>
      <TabList>
        <Tab>
          <Skeleton w="240px" h="25px" />
        </Tab>
      </TabList>
      <TabPanels>
        <TabPanel p={0}>
          <TrackViewSkeleton />
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
}
Example #2
Source File: App.tsx    From engine with MIT License 5 votes vote down vote up
App: view = ({
  data = observe.structure.data,
  viewsCount = observe.structure.count.views,
  producersCount = observe.structure.count.producers,
}) => {
  if (!data || !viewsCount || !producersCount) {
    return;
  }

  return (
    <ChakraProvider>
      <SimpleGrid columns={2}>
        <Box bg="gray.100" h="100vh">
          <Tabs>
            <TabList position="relative">
              <Tab>State</Tab>
              <Tab>
                Views <Tag>{viewsCount}</Tag>
              </Tab>
              <Tab>
                Producers <Tag>{producersCount}</Tag>
              </Tab>
              <Tab>Stats</Tab>
            </TabList>
            <TabPanels>
              <TabPanel pr="0">
                <List>
                  <Box overflowY="scroll" h="92vh">
                    <StateTree data={data} />
                  </Box>
                </List>
              </TabPanel>
              <TabPanel pr="0">
                <ViewsTab />
              </TabPanel>
              <TabPanel pr="0">
                <ProducersTab />
              </TabPanel>
              <TabPanel pr="0">
                <StatsTab />
              </TabPanel>
            </TabPanels>
          </Tabs>
        </Box>
        <Box bg="gray.200" borderLeft="solid 1px" borderColor="gray.300">
          <EditElement />
          <ElementDescription />
        </Box>
      </SimpleGrid>
    </ChakraProvider>
  );
}
Example #3
Source File: index.tsx    From dope-monorepo with GNU General Public License v3.0 5 votes vote down vote up
export default function Debug(props: DebugData) {
    const handleKey = (e: KeyboardEvent) => {
        if (e.key === 'Escape')
        {
            props.manager.events.emit('close');
            e.stopPropagation();
        }
    }

    useEffect(() => {
        document.addEventListener('keyup', handleKey);

        return () => {
            document.removeEventListener('keyup', handleKey);
        }
    });

    return (
        <ChakraProvider theme={theme}>
            <Container style={{
                display: 'flex',
                overflow: 'auto',
                position: "absolute",
                top: "2%",
                right: "2%",
                width: "40%",
                height: "50%",
                backgroundColor: "rgba(255,255,255,0.8)",
                borderRadius: "10px",
            }}>
                <div style={{
                    position: "relative",
                    padding: "1rem",
                }}>
                    <Tabs>
                        <TabList>
                            <Tab fontSize="0.8rem">Player</Tab>
                            <Tab fontSize="0.8rem">World</Tab>
                            <Tab fontSize="0.8rem">Hustlers</Tab>
                            <Tab fontSize="0.8rem">Item Entities</Tab>
                            <Tab fontSize="0.8rem">Lights</Tab>
                        </TabList>

                        <TabPanels>
                            <TabPanel>
                                <PlayerPanel player={props.player} />
                            </TabPanel>
                            <TabPanel>
                                <WorldPanel map={props.map} />
                            </TabPanel>
                            <TabPanel>
                                <HustlersPanel hustlers={props.hustlers} />
                            </TabPanel>
                            <TabPanel>
                                <ItemEntitiesPanel itemEntities={props.itemEntities} />
                            </TabPanel>
                            <TabPanel>
                                <LightsPanel player={props.player} lights={props.lights} />
                            </TabPanel>
                        </TabPanels>
                    </Tabs>
                </div>
            </Container>
        </ChakraProvider>
    )
}
Example #4
Source File: index.tsx    From dope-monorepo with GNU General Public License v3.0 5 votes vote down vote up
DopeTabs = ({ tabs }: DopeTabsProps) => {
  return (
    <Tabs>
      <TabList padding="8px 8px 0 8px" backgroundColor="#222222">
        {tabs.map(tab => (
          <Tab
            key={tab.number}
            marginRight="8px"
            maxWidth="239px"
            width="100%"
            backgroundColor="#434345"
            border="2px solid #000000"
            borderTopRadius="10px"
            color="white"
            _selected={{ bg: 'white', color: 'black' }}
            lineHeight="16px"
            fontSize="14px"
            fontFamily="ChicagoFLF"
            padding="6px 12px"
            display="flex"
            justifyContent="space-between"
          >
            <Box flexGrow="1" />
            <Box flexGrow="1">
              <Text margin="0">{formatTitle(tab.title)}</Text>
            </Box>
            <Box flexGrow="1">
              {Boolean(tab.number) && (
                <Box
                  margin="0 0 0 auto"
                  width="min-content"
                  fontSize="12px"
                  lineHeight="12px"
                  color="white"
                  backgroundColor="#202221"
                  borderRadius="23px"
                  padding="4px 8px"
                >
                  {tab.number}
                </Box>
              )}
            </Box>
          </Tab>
        ))}
      </TabList>

      <TabPanels>
        {tabs.map(tab => (
          <TabPanel>{tab.content}</TabPanel>
        ))}
      </TabPanels>
    </Tabs>
  );
}
Example #5
Source File: tech-stack.tsx    From portfolio with MIT License 4 votes vote down vote up
TechStack = () => {
  const [skillsList, setSkillsList] = useState([]);

  React.useEffect(() => {
    setSkillsList(skills);
  }, []);

  const filterSkills = tab => {
    console.log(skills.filter(skill => skill.type === tab));
    if (tab.length) setSkillsList(skills.filter(skill => skill.type === tab));
    else setSkillsList(skills);
  };

  return (
    <PageSlideFade>
      <VStack spacing={8}>
        <Section>
          <VStack>
            <Header mt={0} mb={1}>
              Tech Stack
            </Header>
            <Text
              fontSize={"xl"}
              color={useColorModeValue("gray.500", "gray.200")}
              maxW="lg"
              textAlign="center"
            >
              A list of my favorite tools and technologies that I use on a
              regular basis.
            </Text>
          </VStack>
        </Section>
        <Section>
          <Tabs
            variant="soft-rounded"
            colorScheme="blue"
            align="center"
            w="100%"
          >
            <TabList display="flex" flexWrap="wrap">
              <Tab
                bg={useColorModeValue("gray.100", "gray.800")}
                color={useColorModeValue("gray.600", "gray.500")}
                _selected={{
                  color: "green.800",
                  bg: "green.100"
                }}
                mr={2}
                mt={2}
                onClick={() => filterSkills("")}
              >
                <HStack spacing={1}>
                  <Icon as={AiTwotoneThunderbolt} weight="fill" />
                  <Text>All</Text>
                </HStack>
              </Tab>
              <Tab
                bg={useColorModeValue("gray.100", "gray.800")}
                color={useColorModeValue("gray.500", "gray.500")}
                _selected={{
                  color: useColorModeValue("gray.100", "gray.800"),
                  bg: useColorModeValue("gray.900", "gray.100")
                }}
                mr={2}
                mt={2}
                onClick={() => filterSkills("development")}
              >
                <HStack spacing={1}>
                  <Icon as={BiDesktop} weight="fill" />
                  <Text>Web Development</Text>
                </HStack>
              </Tab>
              <Tab
                bg={useColorModeValue("gray.100", "gray.800")}
                color={useColorModeValue("gray.600", "gray.500")}
                _selected={{
                  color: "green.800",
                  bg: "green.100"
                }}
                mr={2}
                mt={2}
                onClick={() => filterSkills("design")}
              >
                <HStack spacing={1}>
                  <Icon as={GiSpiderWeb} weight="fill" />
                  <Text>Web Design</Text>
                </HStack>
              </Tab>
              <Tab
                bg={useColorModeValue("gray.100", "gray.800")}
                color={useColorModeValue("gray.600", "gray.500")}
                _selected={{
                  color: "red.800",
                  bg: "red.100"
                }}
                mr={2}
                mt={2}
                onClick={() => filterSkills("devops")}
              >
                <HStack spacing={1}>
                  <Icon as={AiOutlineCloudServer} weight="fill" />
                  <Text>Devops</Text>
                </HStack>
              </Tab>
            </TabList>
            <TabPanels minHeight={"45vh"}>
              <TabPanel px={0}>
                <MotionBox
                  variants={container}
                  initial="hidden"
                  animate="visible"
                >
                  <SimpleGrid columns={[1, 1, 2]} spacing={4} mt={8}>
                    {skillsList.map((tool, index) => (
                      <SkillCard
                        key={index}
                        name={tool.name}
                        description={tool.description}
                        image={tool.image}
                        platform={"web"}
                        link={tool.link}
                      />
                    ))}
                  </SimpleGrid>
                </MotionBox>
              </TabPanel>
              <TabPanel px={0}>
                <MotionBox
                  variants={container}
                  initial="hidden"
                  animate="visible"
                >
                  <SimpleGrid columns={[1, 2]} spacing={4} mt={8}>
                    {skillsList.map((tool, index) => (
                      <SkillCard
                        key={index}
                        name={tool.name}
                        description={tool.description}
                        image={tool.image}
                        platform={"web"}
                        link={tool.link}
                      />
                    ))}
                  </SimpleGrid>
                </MotionBox>
              </TabPanel>
              <TabPanel px={0}>
                <MotionBox
                  variants={container}
                  initial="hidden"
                  animate="visible"
                >
                  <SimpleGrid columns={[1, 2]} spacing={4} mt={8}>
                    {skillsList.map((tool, index) => (
                      <SkillCard
                        key={index}
                        name={tool.name}
                        description={tool.description}
                        image={tool.image}
                        platform={"web"}
                        link={tool.link}
                      />
                    ))}
                  </SimpleGrid>
                </MotionBox>
              </TabPanel>
              <TabPanel px={0}>
                <MotionBox
                  variants={container}
                  initial="hidden"
                  animate="visible"
                >
                  <SimpleGrid columns={[1, 2]} spacing={4} mt={8}>
                    {skillsList.map((tool, index) => (
                      <SkillCard
                        key={index}
                        name={tool.name}
                        description={tool.description}
                        image={tool.image}
                        platform={"web"}
                        link={tool.link}
                      />
                    ))}
                  </SimpleGrid>
                </MotionBox>
              </TabPanel>
            </TabPanels>
          </Tabs>
        </Section>
      </VStack>
    </PageSlideFade>
  );
}
Example #6
Source File: AmountSelect.tsx    From rari-dApp with GNU Affero General Public License v3.0 4 votes vote down vote up
TabBar = ({
  color,
  mode,
  setMode,
}: {
  mode: Mode;
  setMode: (mode: Mode) => any;
  color: string | null | undefined;
}) => {
  const isSupplySide = mode < 2;
  const { t } = useTranslation();

  // Woohoo okay so there's some pretty weird shit going on in this component.

  // The AmountSelect component gets passed a `mode` param which is a `Mode` enum. The `Mode` enum has 4 values (SUPPLY, WITHDRAW, BORROW, REPAY).
  // The `mode` param is used to determine what text gets rendered and what action to take on clicking the confirm button.

  // As part of our simple design for the modal, we only show 2 mode options in the tab bar at a time.

  // When the modal is triggered it is given a `defaultMode` (starting mode). This is passed in by the component which renders the modal.
  // - If the user starts off in SUPPLY or WITHDRAW, we only want show them the option to switch between SUPPLY and WITHDRAW.
  // - If the user starts off in BORROW or REPAY, we want to only show them the option to switch between BORROW and REPAY.

  // However since the tab list has only has 2 tabs under it. It accepts an `index` parameter which determines which tab to show as "selected". Since we only show 2 tabs, it can either be 0 or 1.
  // This means we can't just pass `mode` to `index` because `mode` could be 2 or 3 (for BORROW or REPAY respectively) which would be invalid.

  // To solve this, if the mode is BORROW or REPAY we pass the index as `mode - 2` which transforms the BORROW mode to 0 and the REPAY mode to 1.

  // However, we also need to do the opposite of that logic in `onChange`:
  // - If a user clicks a tab and the current mode is SUPPLY or WITHDRAW we just pass that index (0 or 1 respectively) to setMode.
  // - But if a user clicks on a tab and the current mode is BORROW or REPAY, we need to add 2 to the index of the tab so it's the right index in the `Mode` enum.
  //   - Otherwise whenver you clicked on a tab it would always set the mode to SUPPLY or BORROW when clicking the left or right button respectively.

  // Does that make sense? Everything I described above is basically a way to get around the tab component's understanding that it only has 2 tabs under it to make it fit into our 4 value enum setup.
  // Still confused? DM me on Twitter (@transmissions11) for help.

  return (
    <>
      <style>
        {`
            
            .chakra-tabs__tab {
              color: ${color ?? "#FFFFFF"} !important;

              border-bottom-width: 1px;
            }

            .chakra-tabs__tablist {
              border-bottom: 1px solid;
              border-color: #272727;
            }
            
        `}
      </style>
      <Box px={3} width="100%" mt={1} mb="-1px" zIndex={99999}>
        <Tabs
          isFitted
          width="100%"
          align="center"
          index={isSupplySide ? mode : mode - 2}
          onChange={(index: number) => {
            if (isSupplySide) {
              return setMode(index);
            } else {
              return setMode(index + 2);
            }
          }}
        >
          <TabList>
            {isSupplySide ? (
              <>
                <Tab fontWeight="bold" _active={{}} mb="-1px">
                  {t("Supply")}
                </Tab>
                <Tab fontWeight="bold" _active={{}} mb="-1px">
                  {t("Withdraw")}
                </Tab>
              </>
            ) : (
              <>
                <Tab fontWeight="bold" _active={{}} mb="-1px">
                  {t("Borrow")}
                </Tab>
                <Tab fontWeight="bold" _active={{}} mb="-1px">
                  {t("Repay")}
                </Tab>
              </>
            )}
          </TabList>
        </Tabs>
      </Box>
    </>
  );
}
Example #7
Source File: ColorPickerControl.tsx    From openchakra with MIT License 4 votes vote down vote up
ColorPickerControl = (props: ColorPickerPropType) => {
  const theme = useTheme()
  const themeColors: any = omit(theme.colors, [
    'transparent',
    'current',
    'black',
    'white',
  ])

  const { setValue, setValueFromEvent } = useForm()
  const value = usePropsSelector(props.name)

  let propsIconButton: any = { bg: value }
  if (value && themeColors[value]) {
    propsIconButton = { colorScheme: value }
  }

  return (
    <>
      <Popover placement="bottom">
        <PopoverTrigger>
          {props.gradient ? (
            <IconButton
              mr={2}
              boxShadow="md"
              border={props.gradientColor ? 'none' : '2px solid grey'}
              isRound
              aria-label="Color"
              size="xs"
              colorScheme={props.gradientColor}
              bg={props.gradientColor}
            />
          ) : (
            <IconButton
              mr={2}
              boxShadow="md"
              border={value ? 'none' : '2px solid grey'}
              isRound
              aria-label="Color"
              size="xs"
              {...propsIconButton}
            />
          )}
        </PopoverTrigger>
        <Portal>
          <PopoverContent width="200px">
            <PopoverArrow />
            <PopoverBody>
              {props.withFullColor ? (
                <Tabs size="sm" variant="soft-rounded" colorScheme="green">
                  <TabList>
                    <Tab>Theme</Tab>
                    <Tab>All</Tab>
                  </TabList>
                  <TabPanels mt={4}>
                    <TabPanel p={0}>
                      {props.gradient ? (
                        <HuesPickerControl
                          name={props.name}
                          themeColors={themeColors}
                          enableHues
                          setValue={setValue}
                          gradient={true}
                          index={props.index}
                          updateGradient={props.updateGradient}
                        />
                      ) : (
                        <HuesPickerControl
                          name={props.name}
                          themeColors={themeColors}
                          enableHues
                          setValue={setValue}
                          gradient={props.gradient}
                        />
                      )}
                    </TabPanel>

                    <TabPanel p={0}>
                      <Box position="relative" height="150px">
                        <ColorPicker
                          color={props.gradient ? props.gradientColor : value}
                          onChange={(color: any) => {
                            props.gradient
                              ? props.updateGradient!(
                                  `#${color.hex}`,
                                  props.index!,
                                )
                              : setValue(props.name, `#${color.hex}`)
                          }}
                        />
                        );
                      </Box>
                    </TabPanel>
                  </TabPanels>
                </Tabs>
              ) : props.gradient ? (
                <HuesPickerControl
                  name={props.name}
                  themeColors={themeColors}
                  enableHues
                  setValue={setValue}
                  gradient={true}
                  index={props.index}
                  updateGradient={props.updateGradient}
                />
              ) : (
                <HuesPickerControl
                  name={props.name}
                  themeColors={themeColors}
                  enableHues={false}
                  setValue={setValue}
                  gradient={props.gradient}
                />
              )}
            </PopoverBody>
          </PopoverContent>
        </Portal>
      </Popover>
      {props.gradient ? (
        <Input
          width="100px"
          size="sm"
          name={props.name}
          onChange={(e: ChangeEvent<HTMLInputElement>) => {
            props.gradient
              ? props.updateGradient!(e.target.value, props.index!)
              : setValue(props.name, e.target.value)
          }}
          value={props.gradientColor}
        />
      ) : (
        <Input
          width="100px"
          size="sm"
          name={props.name}
          onChange={setValueFromEvent}
          value={value}
        />
      )}
    </>
  )
}
Example #8
Source File: TrackPage.tsx    From takeout-app with MIT License 4 votes vote down vote up
TrackPageInner: React.FC = () => {
  const history = useHistory();
  const streamOptionState = Api.useTrackStreamOptions();
  const { slug: trackSlug } = useParams<{ slug: string }>();

  const { data: conferenceData, error: conferenceError, mutate: mutateConferenceData } = Api.useConference();

  React.useEffect(() => {
    if (!conferenceData) return;
    if (conferenceData.requested_at === 0) return; // Partially mutated by consumeIvsMetadata

    const now = dayjs();
    const isStale = conferenceData.stale_after && conferenceData.stale_after - 2 <= now.unix();
    console.log("conferenceData freshness", {
      isStale,
      now: now.toISOString(),
      at: dayjs.unix(conferenceData.requested_at).toISOString(),
      stale_after: dayjs.unix(conferenceData.stale_after).toISOString(),
    });

    if (isStale) {
      console.log("conferenceData is stale; request revalidation");
      mutateConferenceData();
      const interval = setInterval(() => {
        console.log("Revalidating stale conferenceData...");
        mutateConferenceData();
      }, 1000);
      return () => clearInterval(interval);
    } else {
      console.log("conferenceData is fresh!");
    }
  }, [conferenceData?.requested_at, conferenceData?.stale_after]);

  if (!conferenceData) {
    return (
      <>
        {conferenceError ? (
          <Box my={2}>
            <ErrorAlert error={conferenceError} />
          </Box>
        ) : null}
        <TrackPageSkeleton />
      </>
    );
  }
  const conference = conferenceData?.conference;

  const trackIndex = conference.track_order.indexOf(trackSlug);
  const tracks = conference.track_order
    .filter((k) => conference.tracks.hasOwnProperty(k))
    .map((k) => conference.tracks[k]);

  const onTabChange = (_index: number) => {
    // Do nothing (RouterLink does all)
    // const slug = conference.track_order[index];
    //history.push(`/tracks/${slug}`);
  };

  return (
    <Tabs isLazy index={trackIndex} onChange={onTabChange} variant="rk-tracks">
      {trackIndex === -1 ? (
        <Redirect to={`/tracks/${encodeURIComponent(conferenceData.conference.default_track)}`} />
      ) : null}
      <TabList>
        {tracks.map((t) => (
          <Tab as={RouterLink} to={`/tracks/${encodeURIComponent(t.slug)}`} key={t.slug}>
            <TrackTabContent track={t} selected={t.slug === trackSlug} />
          </Tab>
        ))}
      </TabList>
      <TabPanels>
        {tracks.map((t) => {
          return (
            <TabPanel key={t.slug} p={0}>
              <React.Suspense fallback={<TrackViewSkeleton />}>
                <TrackView track={t} streamOptionsState={streamOptionState} />
              </React.Suspense>
            </TabPanel>
          );
        })}
      </TabPanels>
    </Tabs>
  );
}