@chakra-ui/react#Text 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>
    </>
  );
}

DropZone = ({ text, isDragging = false, isLoaded = false, loadedText = null }: DropZoneProps): JSX.Element => {
    const dragColor = getColor(isLoaded, isDragging);
    const dragFontSize = isDragging ? 'lg' : 'md';
    const dragIconSize = isDragging ? 36 : 28;
    return (
        <Box
            borderRadius='3xl'
            borderWidth='1px'
            minHeight='100px'
            border='dashed'
            borderColor={dragColor}
            pl={5}
            pr={5}
        >
            <Center height='100%'>
                <Flex flexDirection="row" justifyContent="center" alignItems='center'>
                    <Box transition='all 2s ease'>
                        {/* The key is required for the color to change */}
                        <RiDragDropLine key={dragColor} size={dragIconSize} color={dragColor} />
                    </Box>
                    
                    <Text
                        ml={3}
                        color={dragColor}
                        transition='all .2s ease'
                        fontSize={dragFontSize}
                        textAlign='center'
                    >
                        {isLoaded && !isDragging ? loadedText : text}
                    </Text>
                </Flex>
            </Center>
        </Box>
    );
}

export default function NewTunnelButton() {
  const history = createHashHistory();

  function handleRedirect() {
    history.push("/new-tunnel");
  }

  return (
    <Button size="xs" w="100%" leftIcon={<FaPlus />} onClick={handleRedirect}>
      <Text fontSize="sm">New Tunnel</Text>
    </Button>
  );
}

export function OnlineBadger(){
  return(
    <Flex align="center" justify="center">
    <HiStatusOnline color="green"/>
      <Text color="green.400" ml="2">
        You are online!
      </Text>
    </Flex>
  )
}

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>
  )
}

ErrorPage: React.FC<FallbackProps> = ({ error }) => {
  const { t } = useTranslation();

  return (
    <Box color="white">
      <Box bg="red.600" width="100%" p={4}>
        <Heading>{t("Whoops! Looks like something went wrong!")}</Heading>
        <Text>
          {t(
            "You can either reload the page, or report this error to us on our"
          )}{" "}
          <Link isExternal href="https://github.com/Rari-Capital/rari-dApp">
            <u>GitHub</u>
            <ExternalLinkIcon mx="2px" />
          </Link>
        </Text>
      </Box>

      <Code colorScheme="red">{error.toString()}</Code>
    </Box>
  );
}

mountFilters = (props: FilterBlockProps): ReactNode => {
  const { listFilters, analytics, resourceName, provider, gotoPage } = props
  // eslint-disable-next-line
  return (
    <Flex flexWrap="wrap" key="custom_filters">
      {listFilters &&
        listFilters.map((listFilter: ListFilterDescription) => {
          const name = getAccessor(listFilter.name)
          return name ? (
            <Flex flexDirection="column" m={2} key={name}>
              <Text fontWeight="bold">{listFilter.label}</Text>
              <Box>
                {React.createElement(listFilter.Filter, {
                  ...listFilter,
                  name,
                  analytics,
                  resourceName,
                  provider,
                  gotoPage,
                })}
              </Box>
            </Flex>
          ) : (
            <></>
          )
        })}
    </Flex>
  )
}

ProducerItem: view = ({
  id = prop.id,
  name = observe.structure.elements[prop.id].meta.name,
  relativeFilePath = observe.structure.elements[prop.id].meta.relativeFilePath,
  selected = observe.selectedElement.id,
  updateSelectedElement = update.selectedElement,
}) => {
  if (!name) {
    return;
  }
  const isSelected = selected === id;
  return (
    <Box
      borderBottom="1px solid"
      borderColor="gray.300"
      bg={isSelected && "purple.200"}
      p="2"
      cursor="pointer"
      _hover={{ background: !isSelected && "gray.200" }}
      onClick={() =>
        updateSelectedElement.set({
          id,
        })
      }
    >
      <Text>{name}</Text>
      <Text fontSize="xs" color="gray.600">
        {relativeFilePath}
      </Text>
    </Box>
  );
}

ItemEntitiesPanel = (props: {itemEntities: ItemEntity[]}) => {
    return (
        <div>
            <div style={{
                paddingLeft: '1rem',
            }}>
                <Text>
                    {props.itemEntities.length}
                </Text>
            </div>
            <Accordion>
                {
                    props.itemEntities.map((itemEntity, i) => {
                        return <AccordionItem key={i}>
                            <h2>
                                <AccordionButton>
                                    <Box flex='1' textAlign='left'>
                                        #{i}: {itemEntity.name}
                                    </Box>
                                    <AccordionIcon />
                                </AccordionButton>
                            </h2>
                            <AccordionPanel pb={4}>
                                <Position object={itemEntity}/>
                            </AccordionPanel>
                        </AccordionItem>
                    })
                }
            </Accordion>
        </div>
    )
}

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>
  );
}

PermissionRequirements = (): JSX.Element => {
    const permissions: Array<RequirementsItem> = (useAppSelector(state => state.config.permissions) ?? []);
    const [showProgress, setShowProgress] = useBoolean();

    const refreshRequirements = () => {
        setShowProgress.on();
        checkPermissions().then(permissions => {
            // I like longer spinning
            setTimeout(() => {
                setShowProgress.off();
            }, 1000);

            if (!permissions) return;
            store.dispatch(setConfig({ name: 'permissions', value: permissions }));
        });
    };

    return (
        <Box border='1px solid' borderColor={useColorModeValue('gray.200', 'gray.700')} borderRadius='xl' p={3} width='325px'>
            <Stack direction='row' align='center'>
                <Text fontSize='lg' fontWeight='bold'>macOS Permissions</Text>
                <Box
                    _hover={{ cursor: 'pointer' }}
                    animation={showProgress ? `${spin} infinite 1s linear` : undefined}
                    onClick={refreshRequirements}
                >
                    <BiRefresh />
                </Box>
            </Stack>
            <UnorderedList mt={2} ml={8}>
                {permissions.map(e => (
                    <ListItem key={e.name}>
                        <Stack direction='row' align='center'>
                            <Text fontSize='md'><strong>{e.name}</strong>:&nbsp;
                                <Box as='span' color={e.pass ? 'green' : 'red'}>{e.pass ? 'Pass' : 'Fail'}</Box>
                            </Text>
                            {(e.pass) ? (
                                <Popover trigger='hover'>
                                    <PopoverTrigger>
                                        <Box ml={2} _hover={{ color: 'brand.primary', cursor: 'pointer' }}>
                                            <AiOutlineInfoCircle />
                                        </Box>
                                    </PopoverTrigger>
                                    <PopoverContent>
                                        <PopoverArrow />
                                        <PopoverCloseButton />
                                        <PopoverHeader>How to Fix</PopoverHeader>
                                        <PopoverBody>
                                            <Text>
                                                {e.solution}
                                            </Text>
                                        </PopoverBody>
                                    </PopoverContent>
                                </Popover>
                            ): null}
                        </Stack>
                    </ListItem>
                ))}
            </UnorderedList>
        </Box>
    );
}

ContextMenuItem: React.FC<Props> = ({
  children,
  onClick,
  color,
  colorScheme,
  disabled,
  command,
  icon,
  ...buttonProps
}) => {
  const [contextMenusState, setContextMenusState] =
    useRecoilState(contextMenusAtom);

  return (
    <Button
      onClick={(e) => {
        e.preventDefault();

        // call the provided click handler with the event and the passthrough data from the trigger
        onClick && onClick({ event: e, passData: contextMenusState.passData });

        // TODO: make it more specific
        // close all menus
        setContextMenusState((oldState) => {
          return {
            ...oldState,
            menus: oldState.menus.map((m) => ({
              ...m,
              isOpen: false,
            })),
          };
        });
      }}
      borderRadius={0}
      w="full"
      justifyContent="space-between"
      size="sm"
      overflow="hidden"
      textOverflow="ellipsis"
      colorScheme={colorScheme}
      color={color}
      disabled={disabled}
      {...buttonProps}
    >
      {/* left */}
      <HStack spacing={2} alignItems="center" w="full" h="full">
        {/* icon */}
        {icon}
        {/* children */}
        <Text>{children}</Text>
      </HStack>
      {/* right */}
      <Text size="sm" opacity={0.5} fontFamily="mono">
        {command}
      </Text>
    </Button>
  );
}

export function LoadingOverlay(props: Props) {
  if (!props.loading) return <></>;

  return (
    <Modal isOpen={props.loading} isCentered onClose={() => {}}>
      <ModalOverlay>
        <ModalContent
          p="16"
          backgroundColor="gray.800"
          flexDirection="row"
          justifyContent="space-between"
          alignItems="center"
        >
          <Text color="purple.600" fontWeight="bold" fontSize="2rem">Calling</Text>
          <motion.div
            style={loadingContainer}
            variants={loadingContainerVariants}
            initial="start"
            animate="end"
          >
            <motion.span
              style={loadingCircle}
              variants={loadingCircleVariants}
              transition={loadingCircleTransition}
            />
            <motion.span
              style={loadingCircle}
              variants={loadingCircleVariants}
              transition={loadingCircleTransition}
            />
            <motion.span
              style={loadingCircle}
              variants={loadingCircleVariants}
              transition={loadingCircleTransition}
            />
          </motion.div>
        </ModalContent>
      </ModalOverlay>
    </Modal>
  );
}

function BannerContent() {
  return <Text as="span" fontWeight="bold">Coupon successfully applied ?</Text>
}

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>
  );
}

LiquidationEventsList = ({
  liquidations,
  totalLiquidations,
  setLiquidationsToShow,
}: {
  liquidations?: LiquidationEvent[];
  totalLiquidations: number;
  setLiquidationsToShow: React.Dispatch<React.SetStateAction<number>>;
}) => {
  const { t } = useTranslation();

  const isMobile = useIsMobile();

  return (
    <Column
      mainAxisAlignment="flex-start"
      crossAxisAlignment="flex-start"
      expand
    >
      <Row
        mainAxisAlignment="flex-start"
        crossAxisAlignment="center"
        height="45px"
        width="100%"
        flexShrink={0}
        pl={4}
        pr={1}
      >
        <Text fontWeight="bold" width={isMobile ? "100%" : "30%"}>
          {t("Recent Liquidations")}
        </Text>

        {isMobile ? null : (
          <>
            <Text fontWeight="bold" textAlign="center" width="23%">
              {t("Collateral Seized")}
            </Text>

            <Text fontWeight="bold" textAlign="center" width="23%">
              {t("Borrow Repaid")}
            </Text>

            <Text fontWeight="bold" textAlign="center" width="25%">
              {t("Timestamp")}
            </Text>
          </>
        )}
      </Row>

      <ModalDivider />

      <Column
        mainAxisAlignment="flex-start"
        crossAxisAlignment="center"
        width="100%"
      >
        {liquidations ? (
          <>
            {liquidations.map((liquidation, index) => {
              return (
                <LiquidationRow
                  key={liquidation.transactionHash}
                  liquidation={liquidation}
                  noBottomDivider={index === liquidations.length - 1}
                />
              );
            })}

            <RowsControl
              totalAmount={totalLiquidations}
              setAmountToShow={setLiquidationsToShow}
            />
          </>
        ) : (
          <Spinner my={8} />
        )}
      </Column>
    </Column>
  );
}

export function FilesUpload({
  value,
  onChange,
  upload,
  buttonProps,
  label,
  listItemIcon,
  linkProps,
  maxFileSize,
  multiple,
}: FilesUploadProps): ReactElement<FilesUploadProps> {
  const valueRef = useRef(value)

  useEffect(() => {
    valueRef.current = value
  }, [value])

  const handleUpload = useCallback(
    (desc: FileDescriptor[]) => {
      const newValue = [...valueRef.current, ...desc]
      onChange(newValue)
    },
    [onChange]
  )

  return (
    <>
      <FilesList listItemIcon={listItemIcon} linkProps={linkProps} value={value} onChange={onChange} />
      <UploadButton
        label={label}
        onSelect={upload}
        onUpload={handleUpload}
        buttonProps={buttonProps}
        maxFileSize={maxFileSize}
        multiple={multiple}
      />
      {maxFileSize && (
        <Text fontSize="sm" color="gray.500" mt={2}>
          Максимальный размер файла - {Filesize(maxFileSize)}
        </Text>
      )}
    </>
  )
}