@chakra-ui/react#Heading TypeScript Examples

export default function HeroSection() {
  return (
    <>
      <Flex h={"55vh"} justifyContent="center" align="center">
        <SlideFade in={true} offsetY="50vh">
          <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
            <Heading
              fontWeight={600}
              fontSize={{ base: "2xl", sm: "4xl", md: "6xl" }}
              lineHeight={"110%"}
            >
              <Text textShadow="1px 1px #9c1786">Make notes for </Text>
              <Text
                as={"span"}
                color={"green.400"}
                bgGradient="linear(to-r, green.200, pink.500)"
                bgClip="text"
              >
                your daily work
              </Text>
            </Heading>
          </motion.div>
        </SlideFade>
      </Flex>
    </>
  );
}

UserCreate: NextPage = () => {
  const toast = useToast()
  const { replace } = useRouter()

  const onSubmit = async (values: IFormValues) => {
    try {
      await fetch(`/api/users`, {
        method: 'POST',
        body: JSON.stringify(values),
        headers: {
          'Content-Type': 'application/json',
        },
      })
      toast({
        status: 'success',
        description: 'User successfully created',
        duration: 2000,
      })
      replace('/users')
    } catch (e) {
      toast({
        status: 'error',
        description: 'Failed to create user',
        duration: 2000,
      })
    }
  }

  return (
    <Layout title="User create" backRoute="/users">
      <VStack spacing={4} width="100%">
        <Heading>User create</Heading>
        <UserForm onSubmit={onSubmit} />
      </VStack>
    </Layout>
  )
}

export function OnlineList(props: Props){
  const { userId } = useStore()

  if (props.users.length < 2) return <></>

  return (
      <Flex justify="center" align="center" w="full" direction="column">
        <Heading color="purple.200" fontSize="1rem" mb="2">Online users: </Heading>
          {props.users.map(user => {
            if (user !== userId) return <CallButton key={user} text={user} onClick={() => props.callback(user)} />
            else return <></>
          })}
      </Flex>
  )
}

PageNotFound = memo(() => {
  return (
    <Heading
      color="#FFF"
      style={{
        position: "fixed",
        left: "50%",
        top: "50%",
        marginTop: "-15px",
        marginLeft: "-114px",
      }}
    >
      404: Not Found
    </Heading>
  );
})

FeatureTitle: FC<{ imgSrc: string; title: string }> = ({ imgSrc, title }) => {
  return (
    <>
      <HStack>
        <Image src={imgSrc} width="120px" height="120px" alt={title} />
      </HStack>
      <br />
      <HStack>
        <Heading fontSize="1em">{title}</Heading>
      </HStack>
    </>
  );
}

WizardValidationErrors = ({ errors }: { errors: string[] }): JSX.Element => {
  const ErrorDisplay = (): JSX.Element => (
    <Box m={5}>
      <Heading size="sm">Пожалуйста, исправьте ошибки ниже:</Heading>
      <ul>
        {errors.map((error: string) => (
          <li style={{ color: 'red' }} key={error}>
            {error}
          </li>
        ))}
      </ul>
    </Box>
  )

  if (errors.length > 0) {
    return <ErrorDisplay />
  }
  return <></>
}

IndexPageComponent: FC<IProps> = ({ statusCode }) => {
  const heightOfNavbar: string = "74px";
  const containerPadding: string = "1rem";

  const signOutButtonNode = () => {
    return (
      <Box>
        <Link href="/">
          <Button>Return to the home page</Button>
        </Link>
      </Box>
    );
  };

  return (
    <Stack>
      <Flex
        minH={`calc(100vh - ${heightOfNavbar} - ${containerPadding}*2)`}
        justifyContent="center"
        alignItems="center"
      >
        <Stack spacing={4} maxW="xl" mx="auto">
          <Heading textAlign="center">Nextjs Hasura Boilerplate</Heading>
          <Text fontSize="xl" lineHeight="tall" textAlign="center">
            {statusCode
              ? `An error ${statusCode} occurred on server`
              : "An error occurred on client"}
          </Text>
          <Box>
            <Stack isInline align="center" justifyContent="center">
              {signOutButtonNode()}
            </Stack>
          </Box>
        </Stack>
      </Flex>
    </Stack>
  );
}

Activity = () => {
  return (
    <div>
      <HeaderContainer>
        <Header />
        <HomeHeaderTabNav />
      </HeaderContainer>

      <Container maxW="5xl" mt={10}>
        <Heading as="h2" size="md" py={5}>
          Activity
        </Heading>
        <Text fontSize="sm" color="gray.400">
          Coming soon
        </Text>
      </Container>
    </div>
  );
}

HeadingAnchored = ({ children, as: headingLevel, ...restProps }) => {
  const { addHeading } = useHeadingNavigationContext();
  const headingText = typeof children === 'string' ? children : children[0];

  const anchor = getAnchor(headingText);
  const link = `#${anchor}`;
  const hoverStyling = {
    textDecoration: 'none',
    _before: {
      content: '"#"',
      color: '#F56565',
      fontWeight: 'bold',
      position: 'absolute',
      left: 0,
      transform: 'translateX(-100%)',
      paddingX: 2,
    },
  };
  const focusStyling = {
    outline: 'none',
  };

  useEffect(() => {
    addHeading({
      anchor,
      label: headingText,
      headingLevel,
    });
  }, [anchor, headingText]);

  return (
    <Heading id={anchor} as={headingLevel} position="relative" {...restProps}>
      <Link href={link} className="anchor-link" _hover={hoverStyling} _focus={focusStyling}>
        {children}
      </Link>
    </Heading>
  );
}

export function BlogCardPost({ post }: IBlogCardProps) {
  return (
    <Box maxW="sm" borderWidth="2px" borderRadius="lg" overflow="hidden" borderColor="orange.400">
      <Box p="4" as="a" display="block" href={`/blog/${post.slug}`}>
        <Heading as="h3" mb="2" size="md" color="orange.400" fontFamily="body">
          {post.title}
        </Heading>
        <Button leftIcon={<HiClock />} colorScheme="gray" variant="solid" size="xs">
          {post.date}
        </Button>
        <Text mt="4">{post.excerpt}</Text>
      </Box>
    </Box>
  )
}

Home = () => {
  const { push } = useRouter()

  const onCustomUserHandler = async () => {
    const txt = await fetch('/api/users/custom').then((res) => res.text())
    alert(txt)
  }

  return (
    <Layout title="Home">
      <VStack spacing={6} flex={1}>
        <Heading>next-crud example</Heading>
        <VStack spacing={4} w="100%" px={7}>
          <Button isFullWidth colorScheme="blue" onClick={() => push('/users')}>
            Users
          </Button>
          <Button isFullWidth colorScheme="red" onClick={onCustomUserHandler}>
            Custom user handler
          </Button>
          <Button isFullWidth colorScheme="green" onClick={() => push('/docs')}>
            Swagger doc
          </Button>
        </VStack>
      </VStack>
    </Layout>
  )
}

HomePageHeader: React.FC<HomePageHeaderProps> = ({ welcomeMessage, title, desc }) => {
  return (
    <Box
      backgroundColor="gray.900"
      backgroundImage={`linear-gradient(${theme.colors.gray[900]}, ${theme.colors.gray[800]})`}
      as="header"
      px={[4, null, null, 8]}
      py={['3.1em', null, null, '6.1em']}
    >
      <Box mx="auto" maxWidth="6xl">
        <Box maxWidth={['100%', null, null, '50%']}>
          <Heading fontFamily="body" fontWeight="100" mb="8px" as="h2" color="reactBlue.200" textTransform="uppercase" size="md">
            {welcomeMessage}
          </Heading>
          <Heading as="h3" fontFamily="body" fontWeight="500" color="white" size="2xl">
            {title}
          </Heading>
          <Text as="p" my="20px" color="white" fontFamily="body">
            {desc}
          </Text>
          <LinkButton
            href="https://www.meetup.com/reactindonesia/"
            isExternal
            ml="-16px"
            color="white"
            _hover={{ backgroundColor: '#ffffff1a' }}
          >
            Bergabung
          </LinkButton>
        </Box>
      </Box>
    </Box>
  )
}

components = {
    h1: ({ children }) => <Heading as="h1" my="1.5rem" size="2xl">{children}</Heading>,
    h2: ({ children }) => <Heading as="h2" my="1.5rem" size="xl">{children}</Heading>,
    h3: ({ children }) => <Heading as="h3" my="1.5rem" size="lg">{children}</Heading>,
    h4: ({ children }) => <Heading as="h4" my="1.5rem" size="md">{children}</Heading>,
    p: ({ children }) => <Text mb="1.5rem" fontSize="lg">{children}</Text>,
    Center,
    ul: ({ children }) => <UnorderedList mb="1.5rem">{children}</UnorderedList>,
    ol: ({ children }) => <OrderedList mb="1.5rem">{children}</OrderedList>,
    li: ({ children }) => <ListItem fontSize="lg">{children}</ListItem>,
    Image,
    ImageBorder,
    code: Code,
    CodeBlock,
    a: ({ children, href }) => <u><Link href={href} isExternal>{children}</Link></u>,
    NextLink: ({ children, href }) => <u><NextLink href={href}>{children}</NextLink></u>,
}

ControlTrackCards: React.FC<Props> = ({ track }) => {
  //  const { data: controlConferenceData } = ControlApi.useConference();
  const { data: cardsData } = ControlApi.useTrackCards(track.slug);

  return (
    <Box>
      <Heading>{track.name}</Heading>
      <ControlTrackCardForm track={track} />
      {cardsData?.track_cards.map((card) => (
        <TrackCardBox key={`${track.slug}-${card.at}`} card={card} />
      ))}
    </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>
}

PrivateApiWalkthrough = (): JSX.Element => {
    return (
        <SlideFade in={true} offsetY='150px'>
            <Box px={5}>
                <Text fontSize='4xl'>Private API Setup (Advanced)</Text>
                <Text fontSize='md' mt={5}>
                    You may already know this, but BlueBubbles is one of the only cross-platform iMessage solution that
                    supports sending reactions, replies, subjects, and effects. This is because we developed an Objective-C
                    library that allows us to interface with Apple's "private APIs". Normally, this is not possible, however,
                    after disabling your macOS device's SIP controls, these private APIs are made accessible.
                </Text>
                <Text fontSize='md' mt={5}>
                    If you would like to find out more information, please go to the link below:
                </Text>
                <LinkBox as='article' maxW='sm' px='5' pb={5} pt={2} mt={5} borderWidth='1px' rounded='xl'>
                    <Text color='gray'>
                        https://docs.bluebubbles.app/private-api/
                    </Text>
                    <Heading size='md' my={2}>
                        <LinkOverlay href='https://bluebubbles.app/donate' target='_blank'>
                            Private API Documentation
                        </LinkOverlay>
                    </Heading>
                    <Text>
                        This documentation will go over the pros and cons to setting up the Private API. It will speak to
                        the risks of disabling SIP controls, as well as the full feature set that uses the Private API
                    </Text>
                </LinkBox>
                <Text fontSize='3xl' mt={5}>Configurations</Text>
                <Alert status='info' mt={2}>
                    <AlertIcon />
                    Unless you know what you're doing, please make sure the following Private API Requirements all pass
                    before enabling the setting. Enabling this will automatically attempt to install the helper bundle
                    into MacForge or MySIMBL.
                </Alert>
                <Box mt={4} />
                <PrivateApiField
                    helpText={'Note: If the plugins folder is missing, you may need to manually install the helper bundle'}
                />
            </Box>
        </SlideFade>
    );
}

function AllCoupons() {
  const {isOpen, onOpen, onClose} = useDisclosure()
  const btnRef = React.useRef<HTMLButtonElement>(null)

  const courses = useCourses()

  return (
    <>
      <Button ref={btnRef} colorScheme="teal" onClick={onOpen}>
        Open
      </Button>
      <Drawer
        isOpen={isOpen}
        placement="right"
        onClose={onClose}
        size={"4xl"}
        finalFocusRef={btnRef}
      >
        <DrawerOverlay/>
        <DrawerContent>
          <DrawerCloseButton/>
          <DrawerBody>
            <Box my={9}>
              <Center>
                <Heading my={3} className={"course-list-title"} textAlign="center">Premium courses with
                  discount</Heading>
              </Center>
              <Stack spacing="10" py="5">
                {Object.entries(courses.coursesWithCoupon)
                  .sort(([_, course]) => course.courseDetails.language === 'English' ? -1 : 1)
                  .map(([url, course]) => (
                  <CourseCard key={url} course={course}/>
                ))}
              </Stack>
            </Box>
            <Box>
              <Center>
                <Heading my={3} className={"course-list-title"} textAlign="center">More free courses</Heading>
              </Center>
              <Stack spacing="10" py="5">
                {Object.entries(courses.freeCourses).map(([url, course]) => (
                  <CourseCard key={url} course={course}/>
                ))}
              </Stack>
            </Box>
          </DrawerBody>
        </DrawerContent>
      </Drawer>
    </>
  )
}

export function FooterSignup() {
  return (
    <>
      <Heading fontSize="24px" mb="15px" className="yellow-gradient-color">
        Be the first to know
      </Heading>
      <Text color="gray.400" mb="15px">
        Get notified about the upcoming sessions, news, articles, jobs, and
        opensource projects.
      </Text>

      <form action="#">
        <Box position="relative">
          <Input
            type="email"
            isRequired
            name="entry.1808449400"
            px="25px"
            bg="gray.900"
            height="50px"
            rounded="50px"
            _placeholder={{ color: "gray.600" }}
            placeholder="Enter your email"
            _focus={{ outline: 0 }}
            color="gray.100"
            borderWidth={0}
          />
          <Button
            type="submit"
            height="50px"
            color="gray.100"
            _hover={{ bg: "yellow.400", color: "gray.900" }}
            position="absolute"
            top="0"
            right="0"
            bg="gray.700"
            rounded="50px"
            px="25px"
          >
            Subscribe
          </Button>
        </Box>
      </form>
    </>
  );
}

Card = (props: CardProps) => {
  const { title, role, skills, period, logo, colorMode, alt } = props;
  return (
    <CardTransition>
      <Box
        px={4}
        py={5}
        borderWidth="1px"
        _hover={{ shadow: "lg" }}
        bg={useColorModeValue("white", "gray.800")}
        position="relative"
        rounded="md"
      >
        <Flex justifyContent="space-between">
          <Flex>
            <Image
              rounded="full"
              w={16}
              h={16}
              objectFit="cover"
              fallbackSrc={placeholder}
              src={logo}
              alt={alt}
            />
            <Stack spacing={2} pl={3} align="left">
              <Heading
                align="left"
                fontSize="xl"
                color={`mode.${colorMode}.career.text`}
              >
                {title}
              </Heading>
              <Heading
                align="left"
                fontSize="sm"
                color={`mode.${colorMode}.career.subtext`}
              >
                {role}
              </Heading>
              <Stack
                spacing={1}
                mt={3}
                isInline
                alignItems="center"
                display={["none", "none", "flex", "flex"]}
              >
                {skills.map(skill => (
                  <Tag size="sm" padding="0 3px" key={skill}>
                    {skill}
                  </Tag>
                ))}
              </Stack>
            </Stack>
          </Flex>
          <Stack display={["none", "none", "flex", "flex"]}>
            <Text fontSize={14} color={`mode.${colorMode}.career.subtext`}>
              {period}
            </Text>
          </Stack>
        </Flex>
        <Stack
          spacing={1}
          mt={3}
          isInline
          alignItems="center"
          display={["flex", "flex", "none", "none"]}
        >
          {skills.map(skill => (
            <Tag size="sm" padding="0 3px" key={skill}>
              {skill}
            </Tag>
          ))}
        </Stack>
      </Box>
    </CardTransition>
  );
}

RewardsDistributorRow = ({
  rewardsDistributor,
  handleRowClick,
  hideModalDivider,
  activeCTokens,
}: {
  rewardsDistributor: RewardsDistributor;
  handleRowClick: (rD: RewardsDistributor) => void;
  hideModalDivider: boolean;
  activeCTokens: string[];
}) => {
  const { address, fuse } = useRari();
  const isAdmin = address === rewardsDistributor.admin;

  const tokenData = useTokenData(rewardsDistributor.rewardToken);
  //   Balances
  const { data: rDBalance } = useTokenBalance(
    rewardsDistributor.rewardToken,
    rewardsDistributor.address
  );

  const underlyingsMap = useCTokensUnderlying(activeCTokens);
  const underlyings = Object.values(underlyingsMap);

  return (
    <>
      <Tr
        _hover={{ background: "grey", cursor: "pointer" }}
        h="30px"
        p={5}
        flexDir="row"
        onClick={() => handleRowClick(rewardsDistributor)}
      >
        <Td>
          <HStack>
            {tokenData?.logoURL ? (
              <Image
                src={tokenData.logoURL}
                boxSize="30px"
                borderRadius="50%"
              />
            ) : null}
            <Heading fontSize="22px" color={tokenData?.color ?? "#FFF"} ml={2}>
              {tokenData
                ? tokenData.symbol ?? "Invalid Address!"
                : "Loading..."}
            </Heading>
          </HStack>
        </Td>

        <Td>
          {!!underlyings.length ? (
            <CTokenAvatarGroup tokenAddresses={underlyings} popOnHover={true} />
          ) : (
            <Badge colorScheme="red">Inactive</Badge>
          )}
        </Td>

        <Td>
          {(
            parseFloat(rDBalance?.toString() ?? "0") /
            10 ** (tokenData?.decimals ?? 18)
          ).toFixed(3)}{" "}
          {tokenData?.symbol}
        </Td>

        <Td>
          <Badge colorScheme={isAdmin ? "green" : "red"}>
            {isAdmin ? "Is Admin" : "Not Admin"}
          </Badge>
        </Td>
      </Tr>
      {/* {!hideModalDivider && <ModalDivider />} */}
    </>
  );
}

ElementDescription: view = ({
  selectedId = observe.selectedElement.id,
  path = observe.selectedElement.path,
  element = observe.structure.elements[arg.selectedId],
  code = observe.structure.code[arg.selectedId],
  showV2 = update.showV2,
  getShowV2 = get.showV2,
}) => {
  if (!element) {
    return;
  }

  try {
    code = (prettier as any).format(code, {
      parser: "typescript",
      plugins: prettierPlugins,
    });
  } catch (e) {
    code = code || "loading code..";
  }
  return (
    <Box p="4" overflowY="scroll" h="100vh">
      <Box mb="4">
        <VStack align="stretch" spacing={1} bg="gray.400" p="4">
          <Text>
            <Badge color={element.type === "view" ? "green" : "purple"}>
              {element.type}
            </Badge>
          </Text>
          <Text fontSize="xl" fontWeight="bold">
            {" "}
            {element.meta.name}
          </Text>
          <Text>{element.meta.relativeFilePath}</Text>
          <Badge
            onClick={() => showV2.set(!!!getShowV2.value())}
            position="absolute"
            colorScheme="green"
            right="3"
            top="3"
            cursor="pointer"
          >
            Toggle V2
          </Badge>
        </VStack>
      </Box>
      <Box mb="4">
        <Heading size="sm" mb="2">
          Header
        </Heading>

        {element.params.type === OperationTypes.STRUCT && (
          <Operations
            value={element.params.value}
            path={path}
            id={selectedId}
          />
        )}
      </Box>
      <Box mb="2">
        <Heading size="sm" mb="2">
          Body
        </Heading>
        <CodeEditor
          value={code}
          language="typescript"
          placeholder="loading code.."
          onChange={(evn) => {}}
          padding={15}
          style={{
            fontSize: 12,
            backgroundColor: "#f5f5f5",
            fontFamily:
              "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
          }}
        />
      </Box>
    </Box>
  );
}

export default function Home() {
  const { isError, gardens, error } = useDendronGardens();
  if (isError) return <div>failed to load: {JSON.stringify(error)}</div>;
  let extra: any;
  // if (_.isEmpty(gardens)) {
  //   extra = <Button>New Garden from Git</Button>;
  // }
  if (_.isEmpty(gardens)) {
    extra = (
      <Box maxW="32rem">
        <VStack spacing={4} align="stretch">
          <Center>
            <Heading mb={4}>Welcome to Dendron</Heading>
          </Center>
          <Text fontSize="xl">
            If you haven&apos;t already done so, you can install Dendron by following
            the instructions &nbsp;
            <Link
              href="https://dendron.so/notes/678c77d9-ef2c-4537-97b5-64556d6337f1.html"
              isExternal
            >
              here
            </Link>
          </Text>
          <Button>Publish a new site from Git (coming soon) </Button>
        </VStack>
      </Box>
    );
  }
  return (
    <>
      <Head>
        <title>Dendron</title>
        <link rel="icon" href="/favicon.ico" />
        <script type="text/javascript" src="/static/memberful.js" />
      </Head>

      <Grid justifyContent="center">{extra}</Grid>
    </>
  );
}

Stepper = (props: Props) => {
    const [ page, setPage ] = useState(0);
    const [ hustlerIndex, setHustlerIndex ] = useState(0);

    const pages: Array<Page> = [
        {
            heading: "Welcome to Dope Wars!",
            text: '',
            children: <>
                <Text>
                    Welcome OG Hustlers to the beginnings of our Dope City Murderverse! What we have to show is the culmination of untiring efforts from our developers, artists, musicians, and YOU, our community. 
                    It represents the love for what we stand for, the values that we live by, and our unwillingness to waver from them. We are web3. We are hip-hop culture. 
                    We are free minds. We are from all walks of life that have come together for this unified purpose. We are hustlers. What does it represent for you? 
                </Text>
                <Text>
                    Thank you so much for your support. 
                    We felt it was completely necessary to invite you all to our first stress test of Dope City, where you can interact with other hustlers by chatting, flexing your gear, and figuring out how to stack PAPER.  
                    It is a glimpse into a world that has become entrenched in a battle for glory, a struggle for reputation, and a fight for leadership. Welcome to Dope Wars. How will the story unfold?
                </Text>
        
            </>
        },
        {
            heading: "Message from the dev ?",
            text: '',
            children: <>
                <Text>
                    Thanks for joining us today everyone, it is with true joy and proudness that we're presenting you the current state of game!
                </Text>
                <Text>
                    However, please note that this is not the final state of the game and that some parts are still unfinished and *buggy*, so please don't expect
                    the best performance and accuracy. After all, this is still just **fun** stress test so don't be afraid to play around with the game and see what you can do (break)! 
                </Text>
                <Text>
                    Anyway, I'm not gonna bother you anymore so yeah... have fun!
                </Text>
            </>
        }
    ]

    const handleNext = () => {
        pages[page].onNext && pages[page].onNext!();
        if (page === pages.length - 1)
        {
            props.manager.events.emit('game');
            return;
        }

        setPage(page + 1);
    }

    return (
        <VStack>
            <Heading>
                {pages[page].heading}
            </Heading>
            <Text>
                {pages[page].text}
            </Text>
            {pages[page].children}
            <HStack style={footerButtonsStyle}>
                <Button onClick={() => props.manager.events.emit('game')}>
                    {page === pages.length - 1 ? "Finish" : "DGAF"}
                </Button>
                {page > 0 ? <Button onClick={() => setPage(page - 1)}>
                    Go back
                </Button> : undefined}
                {page < pages.length - 1 ? <Button onClick={handleNext}>
                    Next
                </Button> : undefined}
            </HStack>
        </VStack>
    );
}

IndexPageComponent = () => {
  const [session] = useSession();
  const heightOfNavbar: string = "74px";
  const containerPadding: string = "1rem";

  const signInButtonNode = () => {
    if (session) {
      return false;
    }

    return (
      <Box>
        <Link href="/api/auth/signin">
          <Button
            onClick={(e) => {
              e.preventDefault();
              signIn();
            }}
          >
            Create an account
          </Button>
        </Link>
      </Box>
    );
  };

  const signOutButtonNode = () => {
    if (!session) {
      return false;
    }

    return (
      <Box>
        <Link href="/api/auth/signout">
          <Button
            onClick={(e) => {
              e.preventDefault();
              signOut();
            }}
          >
            Sign Out
          </Button>
        </Link>
      </Box>
    );
  };

  return (
    <Stack>
      <Flex
        minH={`calc(100vh - ${heightOfNavbar} - ${containerPadding}*2)`}
        justifyContent="center"
        alignItems="center"
      >
        <Stack spacing={4} maxW="xl" mx="auto">
          <Heading textAlign="center">Nextjs Hasura Boilerplate</Heading>
          <Text fontSize="xl" lineHeight="tall" textAlign="center">
            Boilerplate for building applications using Hasura and Next.js. This
            demo application has been built using Chakra UI, NextAuth.js and
            Apollo.
          </Text>
          <Box>
            <Stack isInline align="center" justifyContent="center">
              {signInButtonNode()}
              {signOutButtonNode()}
            </Stack>
          </Box>
        </Stack>
      </Flex>
    </Stack>
  );
}

Header = () => {
  const { user, logout } = useAuth();

  return (
    <nav>
      <Container maxW="5xl">
        <Box
          display="flex"
          alignItems="center"
          justifyContent="space-between"
          h={16}
        >
          <Box display="flex" alignItems="center">
            <Heading as="h3" fontSize="medium">
              <Link to="/">Ledokku</Link>
            </Heading>
          </Box>
          <div>
            <Menu placement="bottom-end">
              <MenuButton>
                {user?.avatarUrl && (
                  <Image
                    h={8}
                    w={8}
                    borderRadius="full"
                    src={user.avatarUrl}
                    alt="Avatar"
                  />
                )}
              </MenuButton>
              <MenuList fontSize="sm" color="gray.700">
                <MenuItem as={Link} to="/dashboard">
                  Dashboard
                </MenuItem>
                <MenuDivider />
                <MenuItem
                  as="a"
                  href="https://github.com/ledokku/ledokku"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Github
                </MenuItem>
                <MenuDivider />
                <MenuItem onClick={() => logout()}>Logout</MenuItem>
              </MenuList>
            </Menu>
          </div>
        </Box>
      </Container>
    </nav>
  );
}

export function DashboardWrapper({ user }: IDashboardWrapperProps) {
  const [showAdd, setShowAdd] = useState<boolean>(false)

  const handleShowAdd = () => {
    setShowAdd(!showAdd)
  }

  const handleSuccessAdd = () => {
    setShowAdd(false)
    window.location.reload()
  }

  return (
    <Box width={{ base: '100%' }}>
      {user && user.id ? (
        <Stack spacing={8} width="100%">
          <Flex justifyContent="space-between" alignItems="center">
            <Heading as="h3" size="2xl" color="orange.400" display="flex">
              <Text>Tautan Saya</Text>
            </Heading>
            <IconButton
              onClick={handleShowAdd}
              aria-label="Tambah baru"
              fontSize="20px"
              borderRadius="md"
              bg={'orange.400'}
              _hover={{
                bg: 'orange.500'
              }}
              _focus={{
                bg: 'orange.500'
              }}
              icon={showAdd ? <HiMinus color="white" /> : <HiPlus color="white" />}
            />
          </Flex>
          {showAdd ? <UrlForm user={user} onSuccess={handleSuccessAdd} /> : null}
          <UrlList user={user} isFormVisible={showAdd} onShowForm={handleShowAdd} />
        </Stack>
      ) : null}
    </Box>
  )
}

H1: React.FC = ({ children, ...rest }) => (
  <Heading mb={2} as="h1" size="2xl" fontWeight={DEFAULT_HEADING_WEIGHT} {...rest}>
    {children}
  </Heading>
)

LatestPostsItem: FunctionComponent<LatestPostsItemProps> = ({ post, isLastOnPage }) => {
    const { slug, title, description, coverImage, coverImageDescr } = post;
    const coverImageUrl = `/blog-content/${slug}/${coverImage}`;
    const Link: FunctionComponent = ({ children }) => (
        <NextLink href={`/blog/${slug}`}>
            <a className={styles.link}>
                {children}
            </a>
        </NextLink>
    );
    return (
        <>
        <Flex mb={4} mx={6} direction={["column", "row"]}>
            <Flex
                flex="none"
                align={["center", "initial"]}
                justify={["center", "initial"]}
            >
                <Link>
                    <Image src={coverImageUrl} width={200} height={200} alt={coverImageDescr} />
                </Link>
            </Flex>
            <Box mb={3} mx={4}>
                <Link>
                    <Heading as="h2">{title}</Heading>
                </Link>
                <Text mt={3}>{description}</Text>
                <Flex
                    justify={["center", null, "flex-end"]}
                    mt={2}
                    mr={[null, null, 6]}
                >
                    <Link>
                        <Button>
                            Read more
                        </Button>
                    </Link>
                </Flex>
            </Box>
        </Flex>
        {!isLastOnPage && (
            <Box my={5}>
                <hr />
            </Box>
        )}
        </>
    );
}