@chakra-ui/react#Stack TypeScript Examples

CheckboxContainer: FC<CheckboxContainerProps> = (
  props: CheckboxContainerProps
) => {
  const { name, label, children, stackProps, ...rest } = props;

  return (
    <FormControl name={name} label={label} {...rest}>
      <Stack pl={6} mt={1} spacing={1} {...stackProps}>
        {children}
      </Stack>
    </FormControl>
  );
}

CardSkeleton = () => {
  const bgColor = useColorModeValue("white", "gray.900");
  const cards:number[] = [1, 2, 3, 4, 5, 6, 7, 8]

  return (
    <>
      {cards.map(id => {
        return (
          <Box
            key={id}
            size="xl"
            py={2}
            rounded="xl"
            borderWidth="1px"
            bg={bgColor}
          >
            <Stack isInline justifyContent="space-between" py={2} px={[2, 3]}>
              <Box width="100%">
                <HStack isInline justifyContent="space-between">
                  <Skeleton height="14px" width="40%" />
                  <Skeleton height="14px" width="20%" />
                </HStack>
                <VStack align="start" marginTop={2}>
                  <Skeleton height="8px" width="30%" />
                </VStack>
                <Box marginTop={2}>
                  <Skeleton height="8px" width="100%" />
                  <Stack spacing={2} mt={1} isInline alignItems="center">
                    <Skeleton height="8px" width="80%" />
                  </Stack>
                </Box>
              </Box>
            </Stack>
          </Box>
        );
      })}
    </>
  );
}

export function SearchInput({ searchText, onChangeSearch }: ISearchInputProps) {
  return (
    <Box width={{ base: '100%' }}>
      <Stack spacing={4}>
        <InputGroup>
          <Input
            size="lg"
            borderWidth="2px"
            borderColor="orange.400"
            name="searchText"
            placeholder="Cari tautan kamu"
            variant="filled"
            value={searchText}
            onChange={onChangeSearch}
          />
          <InputRightElement
            fontSize="2em"
            color="orange.400"
            mr="2"
            mt="1"
            children={<FiSearch />}
          />
        </InputGroup>
      </Stack>
    </Box>
  )
}

PackagesPage = ({ packages }) => {
  return (
    <HeadingNavigationProvider>
      <MobileMenu />
      <Layout>
        <Heading as="h1" marginBottom={6} textAlign="center">
          Packages
        </Heading>
        <Stack spacing={8} align="center">
          {packages.length ? packages.map(packageItem => <Package {...packageItem} />) : null}
        </Stack>
      </Layout>
    </HeadingNavigationProvider>
  );
}

ElementsSummary: view = ({
  elements,
  isDepsVisible = observe.views[prop.parentId].data.isDepsVisible,
  updateIsDepsVisible = update.views[prop.parentId].data.isDepsVisible,
}) => {
  if (!elements) {
    return;
  }

  let deps = (elements.view || []).concat(elements.producer || []);
  deps = uniq(deps);

  const depsNo = deps.length;
  return (
    <Stack direction="row" ml="2">
      {depsNo > 0 && (
        <>
          <Badge
            variant={isDepsVisible ? "solid" : "outline"}
            colorScheme="purple"
            cursor="pointer"
            onClick={() => updateIsDepsVisible.set(!isDepsVisible)}
          >
            {depsNo} deps
          </Badge>
        </>
      )}
    </Stack>
  );
}

RadioGroupControl: FC<RadioGroupControlProps> = (
  props: RadioGroupControlProps
) => {
  const { name, label, radioGroupProps, stackProps, children, ...rest } = props;
  const [field] = useField(name);
  const { setFieldValue } = useFormikContext();
  const handleChange = (value: string) => {
    setFieldValue(name, value);
  };

  return (
    <FormControl name={name} label={label} {...rest}>
      <RadioGroup {...field} onChange={handleChange} {...radioGroupProps}>
        <Stack direction="row" {...stackProps}>
          {children}
        </Stack>
      </RadioGroup>
    </FormControl>
  );
}

Posts = () => {
  return (
    <PageSlideFade>
      <Header underlineColor={TURQUOISE} mt={0} mb={0}>
        Featured Articles
      </Header>
      <StaggerChildren>
        <Stack spacing={4} mt={12}>
          {articles.map((article, index) => (
            <MotionBox whileHover={{ y: -5 }} key={index}>
              <PostCard article={article} />
            </MotionBox>
          ))}
        </Stack>
      </StaggerChildren>
    </PageSlideFade>
  );
}

FeedsPageComponent = () => {
  const { data } = useFetchFeedsSubscription();

  if (!data) {
    return <Loader />;
  }

  return (
    <Stack spacing={8}>
      <Box>
        <AddNewFeedForm />
      </Box>
      {data.feeds.map((feed: IFeed, index: number) => {
        return (
          <Box key={index}>
            <Feed feed={feed} />
          </Box>
        );
      })}
    </Stack>
  );
}

Avatar = ({ name, picture, date }: AvatarProps) => (
  <Box display="flex" alignItems="center" marginLeft="2em" marginTop="2em">
    <ChakraAvatar background="transparent" src={picture} alt={name} marginRight="2" />
    <Stack gap="0">
      <h4>{name}</h4>
      {date && (
        <div className="mb-6 text-lg">
          <DateFormatter dateString={date} />
        </div>
      )}
    </Stack>
  </Box>
)

Feed: FC<IProps> = ({ feed }) => {
  const authorNode = () => {
    return (
      <Stack
        spacing={4}
        isInline
        alignItems="center"
        p={4}
        borderBottomWidth={1}
      >
        <Avatar name={feed.author.name} src={feed.author.image} />
        <Stack>
          <Text fontWeight="bold">{feed.author.name}</Text>
          <Text>{timeFromNow(feed.created_at)}</Text>
        </Stack>
      </Stack>
    );
  };

  const bodyNode = () => {
    return (
      <Text fontSize="md" p={4}>
        {feed.body}
      </Text>
    );
  };

  return (
    <Box shadow="lg" rounded="lg">
      <Stack spacing={0}>
        {authorNode()}
        {bodyNode()}
      </Stack>
    </Box>
  );
}

Lobby = () => {
  return (
    <Layout>
      <Stack>
        <Flex
          align="center"
          border="2px"
          borderRadius="md"
          height={160}
          justify="center"
        >
          RYO
        </Flex>
        <Container>
          <ContainerHeader>
            Lobby
          </ContainerHeader>
          <Table size="sm" color="white">
            <Thead>
              <Tr>
                <Th>Starts</Th>
                <Th isNumeric>Players</Th>
              </Tr>
            </Thead>
            <Tbody>
              {[0, 1, 2].map((match) => (
                <MatchRow key={match} />
              ))}
            </Tbody>
          </Table>
        </Container>
      </Stack>
    </Layout>
  )
}

AccessDeniedIndicator: FC<IProps> = ({
  message = "You need to Sign In to view this content!",
}) => {
  const iconNode = () => {
    return <WarningTwoIcon color="purple" boxSize="50px" />;
  };

  const signInButtonNode = () => {
    return (
      <Link href="/api/auth/signin">
        <Button
          onClick={(e) => {
            e.preventDefault();
            signIn();
          }}
        >
          {message}
        </Button>
      </Link>
    );
  };

  return (
    <Flex justifyContent="center" alignItems="center" h="200px">
      <Stack spacing={4} align="center">
        <Box>{iconNode()}</Box>
        <Box>{signInButtonNode()}</Box>
      </Stack>
    </Flex>
  );
}

Round = () => (
  <>
    <Head title="Roll Your Own" />
    <GameWindow>
      <GameWindowHeader>
        <NavLink href="/roll-your-own/1" passHref>
          <Button variant="unstyled">
            <HStack color="black">
              <ArrowBack />
              <span>Lobby</span>
            </HStack>
          </Button>
        </NavLink>
        <Stack>
          <GameWindowHeaderAchievements />
          <GameWindowHeaderHustlerProfile />
        </Stack>
      </GameWindowHeader>
      <Drugs />
    </GameWindow>
  </>
)

export function Features() {
  return (
    <Container maxW={'5xl'} mx="auto" as="section" mt="16">
      <Stack p={4} spacing="16">
        <Heading textAlign="center" as="h3">
          Fitur Kunci Ksana.in
        </Heading>
        <SimpleGrid columns={{ base: 1, md: 3 }} spacing={10}>
          <Feature
            icon={<Icon as={FcLink} w={10} h={10} />}
            title={'Mempercantik Tautan'}
            text={'Tidak perlu lagi mengingat tautan yang panjang, pesan tautan dambaanmu sekarang'}
          />
          <Feature
            icon={<Icon as={FcTreeStructure} w={10} h={10} />}
            title={'Bagikan Tautan'}
            text={
              'Sangat mudah membagikan tautan ke berbagai sosial media dan pesan instan, langsung dari halaman dashboard'
            }
          />
          <Feature
            icon={<Icon as={FcBullish} w={10} h={10} />}
            title={'Pantau Statistik'}
            text={'Pantau jumlah pengguna yang mengunjungi tautanmu dengan mudah'}
          />
        </SimpleGrid>
      </Stack>
    </Container>
  )
}

StackPreview: React.FC<{ component: IComponent }> = ({ component }) => {
  const { drop, isOver } = useDropComponent(component.id)
  const { props, ref } = useInteractive(component, true)

  let boxProps: any = {}

  if (isOver) {
    props.bg = 'teal.50'
  }

  return (
    <Box {...boxProps} ref={drop(ref)}>
      <Stack {...props}>
        {component.children.map((key: string) => (
          <ComponentPreview key={key} componentName={key} />
        ))}
      </Stack>
    </Box>
  )
}

function Dashboard() {
  return (
    <LayoutAuth>
      <MetaHead title="Dashboard | Ksana.in" robots={NO_INDEXED} />
      <Stack
        spacing={8}
        mx={'auto'}
        mt="20"
        width={{ base: '100%', md: '4xl' }}
        py={12}
        px={6}
        as="section"
        align={'center'}
        justify={'center'}
      >
        <DashboardContainer />
      </Stack>
    </LayoutAuth>
  )
}

DatabaseSettings = (): JSX.Element => {
    return (
        <section>
            <Stack direction='column' p={5}>
                <Text fontSize='2xl'>Database Settings</Text>
                <Divider orientation='horizontal' />
                <Spacer />
                <PollIntervalField />
            </Stack>
        </section>
    );
}

export function ErrorDefault({ title, ctaLink, ctaText }: IErrorDefaultProps) {
  return (
    <Stack as="section" spacing={8} mx={'auto'} mt="20" maxW={'lg'} py={12} px={6}>
      <Stack align={'center'} spacing={8}>
        <Heading
          fontWeight={700}
          fontSize={{ base: 'xl', md: '2xl' }}
          lineHeight={'110%'}
          textAlign="center"
          as="h3"
        >
          {title}
        </Heading>
        <Image
          width={400}
          height={400}
          src={'/images/illustrations/ill_error_by_manypixels.svg'}
          alt="Error happened"
        />
        <Button
          px={6}
          size="lg"
          color={'white'}
          bg="orange.400"
          _hover={{
            bg: 'orange.500'
          }}
          as={'a'}
          href={ctaLink}
        >
          {ctaText}
        </Button>
      </Stack>
    </Stack>
  )
}

ResetSettings = (): JSX.Element => {
    const alertRef = useRef(null);
    const [requiresConfirmation, confirm] = useState((): string | null => {
        return null;
    });
    return (
        <Stack direction='column' p={5}>
            <Text fontSize='2xl'>Reset Settings</Text>
            <Divider orientation='horizontal' />
            <Spacer />
            <Button
                onClick={() => confirm('resetTutorial')}
            >
                Reset Tutorial
            </Button>
            <Button
                colorScheme={'red'}
                onClick={() => confirm('resetApp')}
            >
                Reset App
            </Button>

            <ConfirmationDialog
                modalRef={alertRef}
                onClose={() => confirm(null)}
                body={confirmationActions[requiresConfirmation as string]?.message}
                onAccept={() => {
                    confirmationActions[requiresConfirmation as string].func();
                }}
                isOpen={requiresConfirmation !== null}
            />
        </Stack>
    );
}

export function Item({ title, text, icon }: IFeatureProps) {
  const textColor = useColorModeValue('gray.500', 'gray.300')

  return (
    <Stack spacing="2" align="center">
      <Flex
        mb={1}
        w={16}
        h={16}
        bg={'gray.100'}
        align={'center'}
        justify={'center'}
        color={'white'}
        rounded={'full'}
      >
        {icon}
      </Flex>
      <Text fontWeight={600}>{title}</Text>
      <Text color={textColor} textAlign="center">
        {text}
      </Text>
    </Stack>
  )
}

function Banner(props: GradientBannerProps) {
  const {actionButton, bannerContent, bgColor, ...rest} = props

  const [isHidden, setIsHidden] = useState(false)

  return (
    <Box display={isHidden ? 'none' : 'block'} pos="fixed" bottom="0" left="0" width="full" as="section" {...rest}>
      <Box
        zIndex="9999"
        bg={bgColor || 'blue.600'}
        color="white"
        py="5"
        px={{base: '3', md: '6', lg: '8'}}
      >
        <HStack spacing="3">
          <Stack
            direction={{base: 'column', sm: 'row'}}
            justifyContent="center"
            alignItems="center"
            spacing={{base: '3', md: '6'}}
            width="full"
          >
            <Text fontSize="3xl">
              <b>FC: </b>
              {bannerContent}
            </Text>
            {actionButton}
          </Stack>
          <CloseButton onClick={() => setIsHidden(true)} alignSelf={{base: 'self-start', sm: 'initial'}}
                       aria-label="Close banner"/>
        </HStack>
      </Box>
    </Box>
  )
}

Footer: React.FC<FooterProps> = ({ className }) => (
  <Grid
    as="footer"
    px="24px"
    py="36px"
    color="gray.300"
    bg="gray.900"
    templateColumns="1fr 1fr minmax(auto, 1140px) 1fr 1fr"
    className={className}
  >
    <Stack align="center" justify="center" gridColumn="3/4" textAlign="center">
      <section>
        <Text margin="0" lineHeight="20px" fontSize="12px">
          &copy; 2020 ReactJS ID.
        </Text>
        <Text margin="0" lineHeight="20px" fontSize="12px">
          Kode sumber situs ini tersedia di{' '}
          <Link href="https://github.com/reactjs-id/website" isExternal color="#fff" rel="noopener noreferrer">
            GitHub
          </Link>
          . Gambar latar disediakan oleh{' '}
          <Link href="https://www.transparenttextures.com/" isExternal color="#fff" rel="noopener noreferrer">
            Transparent Textures
          </Link>
          .
        </Text>
      </section>
    </Stack>
  </Grid>
)

export function ErrorNotLogin({ title, ctaLink, ctaText }: IErrorNotLoginProps) {
  return (
    <Stack as="section" spacing={8} mx={'auto'} maxW={'lg'}>
      <Stack align={'center'} spacing={8}>
        <Heading
          fontWeight={700}
          fontSize={{ base: 'xl', md: '2xl' }}
          lineHeight={'110%'}
          textAlign="center"
          as="h3"
        >
          {title}
        </Heading>

        <Image
          width={400}
          height={400}
          src={'/images/illustrations/ill_protection_by_manypixels.svg'}
          alt="Security Shield"
        />

        <Button
          px={6}
          size="lg"
          color={'white'}
          bg="orange.400"
          _hover={{
            bg: 'orange.500'
          }}
          as={'a'}
          href={ctaLink}
        >
          {ctaText}
        </Button>
      </Stack>
    </Stack>
  )
}

PageBody: React.FC<PageBodyProps> = ({ children, content }) => {
  if (content) {
    return (
      <Box as="section" px={[4, null, null, 8]} flex="1 1 auto">
        <Box mx="auto" maxWidth="3xl" pt={6} pb={12}>
          <Stack spacing={4}>{convert(content, { transform: htmrTransform })}</Stack>
        </Box>
      </Box>
    )
  }

  return (
    <Box as="section" px={[4, null, null, 8]} flex="1 1 auto">
      <Box mx="auto" maxWidth="3xl" py={6}>
        {children}
      </Box>
    </Box>
  )
}

Footer: FC = () => {
  return <Box as='footer' role='contentinfo' mx='auto' maxW='7xl' py='12' px={{ base: '4', md: '8' }}>
    <Stack>
      <Stack direction='row' spacing='4' align='center' justify='space-between'>
        <Box>
          <Link to='/'>
            <Heading>Phonepare</Heading>
          </Link>
          <Text>휴대폰을 비교하세요.</Text>
        </Box>
        <Box>
          <ButtonGroup variant='ghost' color='gray.600'>
            <IconButton as={Link} to='/' aria-label='Home' icon={<FaHome fontSize='20px' />} />
            <IconButton as='a' href='https://github.com/wonderlandpark/phonepare' aria-label='Github' icon={<FaGithub fontSize='20px' />} />
          </ButtonGroup>
        </Box>
      </Stack>
      <Text fontSize='sm' alignSelf={{ base: 'center', sm: 'start' }}>
        &copy; {new Date().getFullYear()} Junseo Park. All rights reserved.
      </Text>
    </Stack>
  </Box>
}

export function HiUser({ user }: IHiUserProps) {
  return (
    <Stack as="section" spacing={8} mx={'auto'} mt="20" maxW={'lg'} py={12} px={6}>
      <Stack align={'center'} spacing={8}>
        <Heading
          fontSize={{ base: '3xl', sm: '4xl', md: '5xl' }}
          lineHeight={'110%'}
          textAlign="center"
        >
          Selamat datang,{' '}
          <Text color="orange.400" fontSize={{ base: 'lg', md: 'xl' }}>
            {user ? user.email.split('@')[0] : ''}
          </Text>
        </Heading>
        <Image
          width={400}
          height={400}
          src={'/images/illustrations/ill_teamwork_by_manypixels.svg'}
          alt="Teamwork"
        />
      </Stack>

      <Stack spacing={2} direction={'row'}>
        <Button
          px={6}
          size="lg"
          color={'white'}
          bg="orange.400"
          _hover={{
            bg: 'orange.500'
          }}
          as={'a'}
          href={'/dashboard'}
          leftIcon={<HiCollection />}
        >
          Lihat dashboard
        </Button>
        <Button
          px={6}
          size="lg"
          color={'white'}
          bg="red.400"
          _hover={{
            bg: 'red.500'
          }}
          onClick={handleLogout}
          leftIcon={<HiLogout />}
        >
          Keluar
        </Button>
      </Stack>
    </Stack>
  )
}

UserOwnedPiggybanks: FC<Props> = ({ uid }) => {
    const { data, error }: { data?: PiggybankDocumentID[], error?: any} = useSWR(uid, fetchUserOwnedPiggybanks);
    if (error) {
        console.error(error);
        return <Text>Error getting data, please try refreshing the page.</Text>;
    }
    if (data) {
        const numActivePiggybanks = data.length;
        const userHasPiggybanks = numActivePiggybanks > 0;
        return (
            <>
            <Stack spacing={4} mb={4} id="user-owned-coindrops">
                {
                userHasPiggybanks
                ? (
                    <>
                    <Title />
                    {data.map(piggybankDocumentID => (
                        <PiggybankListItem
                            key={piggybankDocumentID}
                            id={piggybankDocumentID}
                        />
                    ))}
                    </>
                ) : (
                    <PageTitle
                        title="Create your first Coindrop:"
                    />
                )
                }
                <AddPiggybankListItem
                    numActivePiggybanks={numActivePiggybanks}
                />
                <PiggybankLimitUtilization
                    numActivePiggybanks={numActivePiggybanks}
                />
            </Stack>
            </>
        );
    }
    return (
        <>
        <Title />
        <Box
            textAlign="center"
            mt={6}
        >
            <Stack data-cy="coindrops-loading-skeleton">
                {SkeletonArray(5).map(v => <LoadingSkeleton key={v} />)}
            </Stack>
        </Box>
        </>
    );
}

AddNewFeedForm = () => {
  const [body, setBody] = useState("");
  const [session] = useSession();
  const [
    insertFeed,
    { loading: insertFeedFetching, error: insertFeedError },
  ] = useInsertFeedMutation();

  if (!session) {
    return (
      <AccessDeniedIndicator message="You need to be signed in to add a new feed!" />
    );
  }

  const handleSubmit = async () => {
    await insertFeed({
      variables: {
        author_id: session.id,
        body,
      },
    });

    setBody("");
  };

  const errorNode = () => {
    if (!insertFeedError) {
      return false;
    }

    return (
      <Alert status="error">
        <AlertIcon />
        <AlertTitle>{insertFeedError}</AlertTitle>
        <CloseButton position="absolute" right="8px" top="8px" />
      </Alert>
    );
  };

  return (
    <Stack spacing={4}>
      {errorNode()}
      <Box p={4} shadow="lg" rounded="lg">
        <Stack spacing={4}>
          <FormControl isRequired>
            <FormLabel htmlFor="body">What's on your mind?</FormLabel>
            <Textarea
              id="body"
              value={body}
              onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>
                setBody(e.currentTarget.value)
              }
              isDisabled={insertFeedFetching}
            />
          </FormControl>
          <FormControl>
            <Button
              loadingText="Posting..."
              onClick={handleSubmit}
              isLoading={insertFeedFetching}
              isDisabled={!body.trim()}
            >
              Post
            </Button>
          </FormControl>
        </Stack>
      </Box>
    </Stack>
  );
}

render() {
    if (this.state.hasError) {
      this.props.undo()

      return (
        <Flex
          {...gridStyles}
          alignItems="center"
          justifyContent="center"
          flex={1}
          position="relative"
        >
          <Stack
            alignItems="center"
            direction="row"
            spacing={8}
            bg="white"
            px={6}
            py={6}
            boxShadow="sm"
            width="lg"
          >
            <Box as={FaBomb} fontSize="100px" />
            <Box>
              <b>Oups…</b>
              <br />
              Something went wrong! We have recovered the editor to its previous
              version.
              <Button
                onClick={() => {
                  this.setState({ hasError: false })
                }}
                variant="outline"
                rightIcon={<CheckCircleIcon path="" />}
                size="sm"
                mt={4}
                display="block"
              >
                Reload
              </Button>
            </Box>
          </Stack>
        </Flex>
      )
    }

    return this.props.children
  }