Tabs

A set of content sections—tab panels— displayed one at a time

Tabs

Component: <Tabs />

File: src/components/Tabs/Tabs.tsx

Usage

import { FAQ } from "@/components/FAQ/FAQ";

const tabItems = [
    {
        value: "tab1",
        label: "Account",
        icon: <TbUserCircle />,
        tabContent: <Flex>Account</Flex>
    },
    {
        value: "tab2",
        label: "Payments",
        icon: <TbCreditCard />,
        tabContent: <Flex>Payment settings</Flex>
    }
]

<Tabs
    label="My Menu"
    items={tabItems}
    onChange={(tabValue) => console.log(tabValue)}
/>

Code to get the same result as the GIF at the top of the page.

<Tabs
  w="400px"
  items={[
    {
      value: "payment",
      label: "Payment",
      icon: <TbCreditCard />,
      tabContent: (
        <VStack
          alignItems="flex-start"
          border="1px solid"
          borderColor="blackAlpha.200"
          borderRadius="8px"
          p="24px"
          w="100%"
          flexGrow={1}
          spacing="16px"
        >
          <VStack alignItems="flex-start" spacing="4px">
            <Heading fontSize="24px" as="h2">
              Payment method
            </Heading>
            <Text fontSize="14px" color="blackAlpha.700">
              Update your payment method.
            </Text>
          </VStack>
          <VStack>
            <VStack alignItems="flex-start" spacing="4px">
              <Text fontWeight="semibold" fontSize="14px">
                Credit card
              </Text>
              <Input
                placeholder="4242 4242 4242 4242"
                size="sm"
                borderRadius="6px"
                _placeholder={{
                  color: "blackAlpha.500",
                }}
              />
            </VStack>
            <HStack spacing="9px">
              <Input
                placeholder="MM/YY"
                size="sm"
                borderRadius="6px"
                w="87px"
                textAlign="center"
                _placeholder={{
                  color: "blackAlpha.500",
                }}
              />
              <Input
                placeholder="CVV"
                size="sm"
                borderRadius="6px"
                w="87px"
                textAlign="center"
                _placeholder={{
                  color: "blackAlpha.500",
                }}
              />
            </HStack>
          </VStack>
          <Button
            colorScheme="blackAlpha"
            bgColor="gray.900"
            fontSize="14px"
            p="8px 16px"
            borderRadius="6px"
          >
            Save credit card
          </Button>
        </VStack>
      ),
    },
    {
      value: "features",
      label: "Account",
      icon: <TbUserCircle />,
      tabContent: (
        <VStack
          alignItems="flex-start"
          border="1px solid"
          borderColor="blackAlpha.200"
          borderRadius="8px"
          p="24px"
          w="100%"
          flexGrow={1}
          spacing="16px"
        >
          <VStack alignItems="flex-start" spacing="4px">
            <Heading fontSize="24px" as="h2">
              Account
            </Heading>
            <Text fontSize="14px" color="blackAlpha.700">
              Update your details.
            </Text>
          </VStack>
          <VStack alignItems="flex-start" spacing="4px">
            <Text fontWeight="semibold" fontSize="14px">
              Name
            </Text>
            <Input
              placeholder="John Doe"
              size="sm"
              borderRadius="6px"
              _placeholder={{
                color: "blackAlpha.500",
              }}
            />
          </VStack>
          <Button
            colorScheme="blackAlpha"
            bgColor="gray.900"
            fontSize="14px"
            p="8px 16px"
            borderRadius="6px"
          >
            Save account
          </Button>
        </VStack>
      ),
    },
    {
      value: "password",
      icon: <TbLock />,
      tabContent: (
        <VStack
          alignItems="flex-start"
          border="1px solid"
          borderColor="blackAlpha.200"
          borderRadius="8px"
          p="24px"
          w="100%"
          flexGrow={1}
          spacing="16px"
        >
          <VStack alignItems="flex-start" spacing="4px">
            <Heading fontSize="24px" as="h2">
              Password
            </Heading>
            <Text fontSize="14px" color="blackAlpha.700">
              Update your password.
            </Text>
          </VStack>
          <VStack alignItems="flex-start" spacing="4px">
            <Text fontWeight="semibold" fontSize="14px">
              Current password
            </Text>
            <Input
              placeholder="******"
              size="sm"
              borderRadius="6px"
              _placeholder={{
                color: "blackAlpha.500",
              }}
            />
          </VStack>
          <VStack alignItems="flex-start" spacing="4px">
            <Text fontWeight="semibold" fontSize="14px">
              New password
            </Text>
            <Input
              placeholder="******"
              size="sm"
              borderRadius="6px"
              _placeholder={{
                color: "blackAlpha.500",
              }}
            />
          </VStack>
          <Button
            colorScheme="blackAlpha"
            bgColor="gray.900"
            fontSize="14px"
            p="8px 16px"
            borderRadius="6px"
          >
            Save password
          </Button>
        </VStack>
      ),
    },
  ]}
/>