react-icons/fi#FiChevronRight TypeScript Examples

export function LinkBox({
  as: As = Link,
  title,
  children,
  description,
  ...rest
}: PropsWithChildren<LinkBoxProps>) {
  return (
    <As {...rest}>
      {children}

      <div>
        <strong>{title}</strong>

        {description && <p>{description}</p>}
      </div>

      <FiChevronRight size={18} />
    </As>
  );
}

PlainButton: React.FC<Props> = (props) => {
  const { to, className, name } = props;
  const history = useHistory();

  return (
    <button
      className={clsx(styles.ButtonContainer, className)}
      onClick={() => {
        if (to.startsWith('http') && !onServer()) {
          window.open(to, '_blank');
          return;
        }
        history.push(to);
      }}>
      <div>{name}</div>
      <FiChevronRight size={16} className={styles.Chevron} />
    </button>
  );
}

Item: React.FC<ItemProps> = ({ label, link }) => (
    <LinkWithIcon to={link} iconPos="right">
        <div css={{
            display: "-webkit-box",
            WebkitBoxOrient: "vertical",
            WebkitLineClamp: 3,
            textOverflow: "ellipsis",
            overflow: "hidden",
        }}>{label}</div>
        <FiChevronRight />
    </LinkWithIcon>
)

PageNavigation: React.FC<PageNavigationProps> = ({ connection, vars }) => {
    const { t } = useTranslation();
    const pageInfo = connection.pageInfo;

    return (
        <div css={{
            display: "flex",
            justifyContent: "end",
            alignItems: "center",
            gap: 48,
        }}>
            <div>
                {t("manage.my-videos.page-showing-video-ids", {
                    start: connection.pageInfo.startIndex ?? "?",
                    end: connection.pageInfo.endIndex ?? "?",
                    total: connection.totalCount,
                })}
            </div>
            <div>
                <PageLink
                    vars={{ order: vars.order, first: LIMIT }}
                    disabled={!pageInfo.hasPreviousPage && connection.items.length === LIMIT}
                ><FirstPage /></PageLink>
                <PageLink
                    vars={{ order: vars.order, before: pageInfo.startCursor, last: LIMIT }}
                    disabled={!pageInfo.hasPreviousPage}
                ><FiChevronLeft /></PageLink>
                <PageLink
                    vars={{ order: vars.order, after: pageInfo.endCursor, first: LIMIT }}
                    disabled={!pageInfo.hasNextPage}
                ><FiChevronRight /></PageLink>
                <PageLink
                    vars={{ order: vars.order, last: LIMIT }}
                    disabled={!pageInfo.hasNextPage}
                ><LastPage /></PageLink>
            </div>
        </div>
    );
}

Segment: React.FC<SegmentProps> = ({ target, children }) => (
    <li
        css={{ maxWidth: "100%", ...LI_STYLE }}
        {...target === undefined && { "aria-current": "location" }}
    >
        <FiChevronRight css={{ margin: "0 3px", flexShrink: 0, color: "var(--grey65)" }}/>
        {target === undefined
            ? <div css={TEXT_STYLE}>{children}</div>
            : <Link css={[TEXT_STYLE, FOCUS_STYLE_INSET]} to={target}>{children}</Link>}
    </li>
)

Dashboard: React.FC<ToggleTheme> = ({ toggleTheme }) => {
  return (
    <Layout isContentFull>
      <Header isLink="/" toggleTheme={toggleTheme} />

      <S.Repositories>
        <h1>Principais repositórios de vagas</h1>

        <S.Content>
          {reposData.map((repo) => (
            <S.RepositoryItem key={repo.link} to={repo.link}>
              <img src={repo.imageUrl} alt={repo.name} />
              <div>
                <strong>{repo.name}</strong>
                <p>{repo.desc}</p>
              </div>
              <FiChevronRight size={20} />
            </S.RepositoryItem>
          ))}
        </S.Content>
      </S.Repositories>
    </Layout>
  );
}

ExternalSection = ({
  title,
  icon,
  active,
  onClick,
}: ExternalSectionProps): JSX.Element => {
  const [open, setOpen] = useState(false);
  const toggleOpen = (): void => setOpen(!open);
  return (
    <m.div
      onClick={(): void => {
        onClick();
      }}
    >
      <m.div
        layout
        className={`w-full cursor-pointer select-none overflow-hidden border-l-4 bg-gray-200 dark:bg-tertiaryDark dark:text-gray-400 ${
          active
            ? 'border-l-primary dark:border-l-primary'
            : 'border-gray-400 dark:border-secondaryDark'
        }`}
      >
        <m.div
          layout
          onClick={toggleOpen}
          whileHover={{ scale: 1.01 }}
          whileTap={{ scale: 0.99 }}
          className="flex justify-between gap-2 border-b border-gray-400 p-2 text-sm font-medium dark:border-primaryDark"
        >
          <m.div className="flex gap-2 ">
            <m.div className="my-auto">{icon}</m.div>
            {title}
          </m.div>
          <m.div className="my-auto">
            <FiChevronRight />
          </m.div>
        </m.div>
      </m.div>
    </m.div>
  );
}

Connection: React.FC<IConnectionProps> = ({ connection }) => {
  const [currentConnection, setCurrentConnection] = useRecoilState(
    currentConnectionState
  )
  const [currentDatabase, setCurrentDatabase] = useRecoilState(
    currentDatabaseState
  )
  const setCurrentKey = useSetRecoilState(currentKeyState)
  const [databases, setDatabases] = useState<IDatabase[]>([])
  const [connectionLoading, setConnectionLoading] = useState(false)
  const [isConnectionFailed, setIsConnectionFailed] = useState(false)
  const [isEditModalOpen, toggleEditModalOpen] = useToggle(false)
  const [isDeleteModalOpen, toggleDeleteModalOpen] = useToggle(false)
  const { t } = useTranslation('connection')

  const { addToast } = useToast()

  useEffect(() => {
    if (currentConnection) {
      setIsConnectionFailed(false)
    }
  }, [currentConnection])

  const isConnected = useMemo(() => {
    return currentConnection?.name === connection.name
  }, [currentConnection?.name, connection.name])

  const handleConnect = useCallback(async () => {
    if (!isConnected) {
      setConnectionLoading(true)
      setCurrentConnection(undefined)
      setCurrentDatabase(undefined)
      setCurrentKey(undefined)

      try {
        const databases = await loadConnectionDatabases(connection)

        setDatabases(databases)
        setCurrentConnection(connection)
        setCurrentDatabase(undefined)
      } catch {
        setIsConnectionFailed(true)
      } finally {
        setConnectionLoading(false)
      }
    }
  }, [
    connection,
    isConnected,
    setCurrentConnection,
    setCurrentDatabase,
    setCurrentKey
  ])

  const handleDisconnect = useCallback(async () => {
    setCurrentConnection(undefined)
    setCurrentDatabase(undefined)
    terminateConnection()
  }, [setCurrentConnection, setCurrentDatabase])

  const handleRefreshDatabases = useCallback(async () => {
    try {
      setConnectionLoading(true)

      const databases = await loadConnectionDatabases(connection)

      setDatabases(databases)
    } catch {
      setIsConnectionFailed(true)
    } finally {
      setConnectionLoading(false)
    }
  }, [connection])

  const postSavingConnection = useCallback(async () => {
    toggleEditModalOpen()
    setCurrentConnection(undefined)
    setCurrentDatabase(undefined)
    setIsConnectionFailed(false)
  }, [toggleEditModalOpen, setCurrentConnection, setCurrentDatabase])

  const postDeletingConnection = useCallback(async () => {
    toggleDeleteModalOpen()
    setCurrentConnection(undefined)
    setCurrentDatabase(undefined)
    terminateConnection()
  }, [toggleDeleteModalOpen, setCurrentConnection, setCurrentDatabase])

  const handleSelectDatabase = useCallback(
    async (database: IDatabase) => {
      if (!currentConnection) {
        return
      }

      try {
        await initializeConnection(currentConnection, database)

        setCurrentDatabase(database)
        setCurrentKey(undefined)
      } catch {
        addToast({
          type: 'error',
          title: 'Failed to connect to database',
          description:
            'A connection to this Redis database could not be established.'
        })
      }
    },
    [currentConnection, addToast, setCurrentDatabase, setCurrentKey]
  )

  return (
    <>
      <Container
        key={connection.name}
        connected={isConnected}
        errored={isConnectionFailed}
      >
        <ContextMenuTrigger id={`connection_actions_menu:${connection.name}`}>
          <button type="button" disabled={isConnected} onClick={handleConnect}>
            {connectionLoading ? (
              <Loading>
                <FiLoader />
              </Loading>
            ) : (
              <FiDatabase />
            )}
            {connection.name}
            <FiChevronRight />
          </button>
        </ContextMenuTrigger>

        <ContextMenu
          id={`connection_actions_menu:${connection.name}`}
          className="connection-actions-menu"
        >
          {isConnected ? (
            <MenuItem onClick={handleDisconnect}>
              <DisconnectButton>
                <FiMinusCircle />
                {t('contextMenu.disconnect')}
              </DisconnectButton>
            </MenuItem>
          ) : (
            <MenuItem onClick={handleConnect}>
              <ConnectButton>
                <FiActivity />
                {t('contextMenu.connect')}
              </ConnectButton>
            </MenuItem>
          )}

          <MenuItem onClick={toggleEditModalOpen}>
            <FiEdit2 />
            {t('contextMenu.editSettings')}
          </MenuItem>

          {isConnected && (
            <MenuItem onClick={handleRefreshDatabases}>
              <FiRefreshCcw />
              {t('contextMenu.refreshDatabases')}
            </MenuItem>
          )}

          <MenuItem onClick={toggleDeleteModalOpen}>
            <FiTrash />
            {t('contextMenu.deleteConnection')}
          </MenuItem>
        </ContextMenu>

        {isConnected && !!databases.length && (
          <DatabaseList>
            {databases.map(database => (
              <Database
                connected={currentDatabase?.name === database.name}
                key={database.name}
                onClick={() => handleSelectDatabase(database)}
                type="button"
              >
                <strong>{database.name}</strong>
                <span>
                  {database.keys} {t('keys')}
                </span>
              </Database>
            ))}
          </DatabaseList>
        )}

        {isConnectionFailed && (
          <ConnectionError>
            {t('connectionFailed')}{' '}
            <button type="button" onClick={handleConnect}>
              {t('retry')}
            </button>
          </ConnectionError>
        )}
      </Container>

      <ConnectionFormModal
        visible={isEditModalOpen}
        onRequestClose={postSavingConnection}
        connectionToEdit={connection}
      />

      <DeleteConnectionModal
        visible={isDeleteModalOpen}
        onRequestClose={postDeletingConnection}
        connectionToDelete={connection}
      />
    </>
  )
}

Repository: React.FC<ToggleTheme> = ({ toggleTheme }) => {
  const [repository, setRepositories] = useState<RepositoryProps | null>(null);
  const [issues, setIssues] = useState<IssueProps[]>([]);
  const [searchValue, setSearchValue] = useState('');


  const { params } = useRouteMatch<RepositoryParamsProps>();

  const [allIssues, setAllIssues] = useState<IssueProps[]>([]);

  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    api.get(`repos/${params.repository}`).then((response) => {
      setRepositories(response.data);
    });

    api.get(`repos/${params.repository}/issues`).then((response) => {
      setIssues(response.data);
      setAllIssues(response.data);
      console.log(response.data);
    });
  }, [params.repository]);

  const handleSearch = (val: string) => {
    if (null !== inputRef.current) {
      inputRef.current.focus();
    }

    if (!val) setIssues(allIssues);

    setSearchValue(val);

    // eslint-disable-next-line
    const issuesFiltered = allIssues.filter((issue) => {
      if (issue.title.toLowerCase().indexOf(val.toLowerCase()) !== -1) {
        return true;
      }

      if (issue.body.toLowerCase().indexOf(val.toLowerCase()) !== -1) {
        return true;
      }

      for (let i = 0; i < issue.labels.length; i++) {
        if (
          issue.labels[i].name.toLowerCase().indexOf(val.toLowerCase()) !== -1
        ) {
          return true;
        }
      }

      return false;
    });

    setIssues(issuesFiltered);
  };

  return (
    <Layout isContentFull>
      <Header isLink="/dashboard" toggleTheme={toggleTheme} />
      <S.Container>
        {repository && (
          <S.RepositoryInfo>
            <div>
              <img
                src={repository.owner.avatar_url}
                alt={repository.owner.login}
              />
              <div>
                <strong>{repository.full_name}</strong>
                <p>{repository.description}</p>
              </div>
            </div>
            <ul>
              <li>
                <strong>{repository.open_issues_count}</strong>
                <span>Vagas abertas</span>
              </li>
            </ul>
          </S.RepositoryInfo>
        )}

        <S.Issues>
          <>
            <S.Search>
              <S.Input
                ref={inputRef}
                type="text"
                placeholder="Busque por tecnologia, nível de vaga, local, regime, tipo etc..."
                value={searchValue}
                onChange={(e) => handleSearch(e.target.value)}
              />
              {searchValue && (
                <S.Icon onClick={() => handleSearch('')}>
                  <FiX size={20} />
                </S.Icon>
              )}
            </S.Search>
            {issues.map((issue, index) => (
              <React.Fragment key={issue.id}>
                <a
                  href={issue.html_url}
                  style={{ animationDelay: `0.${index}ms` }}
                >
                  <img src={issue.user.avatar_url} alt={issue.user.login} />
                  <div>
                    <strong>{issue.title}</strong>
                    <p>{issue.user.login}</p>
                  </div>
                  <FiChevronRight size={20} />
                </a>

                {issue.labels.length > 0 && (
                  <S.Labels style={{ animationDelay: `0.${index}ms` }}>
                    {issue.labels.map((label) => (
                      <S.Label
                        color={label.color}
                        onClick={() => handleSearch(label.name)}
                      >
                        <span>{label.name}</span>
                      </S.Label>
                    ))}
                  </S.Labels>
                )}
              </React.Fragment>
            ))}
          </>
        </S.Issues>
      </S.Container>
    </Layout>
  );
}

Dashboard: React.FC = () => {
  const [products, setProducts] = useState<Product[]>([]);

  const dispatch = useDispatch();

  useEffect(() => {
    async function loadProducts() {
      const response = await api.get<Product[]>(
        '/products',
      );

      const data = response.data.map((product) => ({
        ...product,
        priceFormatted: formatPrice(product.price),
      }));

      setProducts(data);
    }

    loadProducts();
  }, []);

  function handleAddProduct(product: Product) {
    dispatch({ type: 'ADD_TO_CART', payload: product });
  }

  return (
    <Layout>
      <s.Header>
        <s.Title>Painel</s.Title>
        <s.Info>
          <span className="cashier">
            CAIXA ABERTO
          </span>
          <span className="date">
            Sexta, 10 julho 2020
          </span>
        </s.Info>
      </s.Header>
      <s.CardContainer>
        <s.Card>
          <header>
            <p>Dinheiro</p>
            <FiDollarSign size="24px" color="green" />
          </header>
          <section>
            <p>R$</p>
            <h1>0,00</h1>
          </section>
        </s.Card>
        <s.Card>
          <header>
            <p>Cartão</p>
            <FiCreditCard size="24px" color="orange" />
          </header>
          <section>
            <p>R$</p>
            <h1>0,00</h1>
          </section>
        </s.Card>
        <s.Card>
          <header>
            <p>Caixa</p>
            <FiHardDrive size="24px" color="grey" />
          </header>
          <section>
            <p>R$</p>
            <h1>0,00</h1>
          </section>
        </s.Card>
      </s.CardContainer>
      <s.Search>
        <FiSearch size="24px" color="grey" />
        <s.SearchInput placeholder="Consultar Material" />
      </s.Search>
      <s.CategoryContainer>
        <CarouselProvider
          naturalSlideWidth={100}
          naturalSlideHeight={190}
          totalSlides={6}
          visibleSlides={5}
          infinite
        >
          <Slider>
            <Slide index={0}>
              <s.CategoryItem>
                <header>
                  <p>Delicatessen</p>
                  <img src={delicatessen} alt="" />
                </header>
              </s.CategoryItem>
            </Slide>
            <Slide index={1}>
              <s.CategoryItem>
                <header>
                  <p>Frios</p>
                  <img src={frios} alt="" />
                </header>
              </s.CategoryItem>

            </Slide>
            <Slide index={2}>
              <s.CategoryItem>
                <header>
                  <p>Salgados</p>
                  <img src={salgados} alt="" />
                </header>
              </s.CategoryItem>
            </Slide>
            <Slide index={3}>
              <s.CategoryItem>
                <header>
                  <p>Bebidas</p>
                  <img src={bebidas} alt="" />
                </header>
              </s.CategoryItem>
            </Slide>

            <Slide index={4}>
              <s.CategoryItem>
                <header>
                  <p>Sorvetes</p>
                  <img src={sorvetes} alt="" />
                </header>
              </s.CategoryItem>
            </Slide>

            <Slide index={5}>
              <s.CategoryItem>
                <header>
                  <p>Sanduíches</p>
                  <img src={sanduiche} alt="" />
                </header>
              </s.CategoryItem>
            </Slide>
          </Slider>
          <ButtonBack className="buttonBack"><FiChevronLeft size="24px" color="grey" /></ButtonBack>
          <ButtonNext className="buttonNext"><FiChevronRight size="24px" color="grey" /></ButtonNext>
        </CarouselProvider>

      </s.CategoryContainer>
      <ProductList>
        {products.map((product) => (
          <li key={product.id}>
            <img src={product.image} alt={product.title} />
            <span>
              <strong>{product.title}</strong>
              <p>{product.priceFormatted}</p>
            </span>

            <button type="button" onClick={() => handleAddProduct(product)}>
              <FiPlusCircle size="24px" color="grey" />
            </button>
          </li>
        ))}
      </ProductList>
    </Layout>
  );
}

HardwareModal = ({
  device,
  open,
  close,
}: HardwareModal): JSX.Element => {
  const [hideDetails, setHideDetails] = useState(false);
  const { breakpoint } = useBreakpoint(BREAKPOINTS, 'md');

  return (
    <Modal open={open} onClose={close}>
      <div className="absolute right-0 z-20 m-2 md:flex">
        <Button onClick={close}>
          <FiX />
        </Button>
      </div>
      <div className="absolute inset-0">
        <motion.div
          layout
          animate={
            breakpoint === 'sm'
              ? hideDetails
                ? 'hiddenSm'
                : 'visibleSm'
              : hideDetails
              ? 'hidden'
              : 'visible'
          }
          variants={{
            hidden: { width: '100%', height: '100%' },
            hiddenSm: { height: '100%', width: '100%' },
            visible: { width: '20%', height: '100%' },
            visibleSm: { height: '33%', width: '100%' },
          }}
          transition={{
            type: 'just',
          }}
          className="flex flex-col md:h-full md:flex-row"
        >
          <motion.div
            layout
            className={`relative z-10 flex h-full w-full rounded-t-2xl md:rounded-l-2xl md:rounded-tr-none ${device.misc.Gradient}`}
          >
            <motion.img
              layout
              src={device.images.Front}
              alt=""
              className="pointer-events-none m-auto max-h-full max-w-full object-cover p-2"
            />
            <div className="absolute -bottom-5 z-20 flex w-full md:bottom-auto md:-right-5 md:h-full md:w-auto">
              <Button
                animate={
                  breakpoint === 'sm'
                    ? hideDetails
                      ? 'hiddenSm'
                      : 'visibleSm'
                    : hideDetails
                    ? 'hidden'
                    : 'visible'
                }
                variants={{
                  hidden: { rotate: 180 },
                  hiddenSm: { rotate: -90 },
                  visible: { rotate: 0 },
                  visibleSm: { rotate: 90 },
                }}
                onClick={() => {
                  setHideDetails(!hideDetails);
                }}
              >
                <FiChevronRight />
              </Button>
            </div>
            <AnimatePresence>
              {!hideDetails && (
                <>
                  <motion.div
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    className={`absolute -bottom-5 z-20 flex md:mt-0 md:hidden md:pb-2 ${
                      hideDetails ? 'opacity-0' : 'opacity-100'
                    }`}
                  >
                    <VariantSelectButton options={device.variants} />
                  </motion.div>
                  <motion.div
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    className="absolute -bottom-3 right-0 m-auto mr-2 ml-auto flex md:inset-x-1 md:bottom-4 md:mt-2"
                  >
                    <div className="m-auto flex gap-2">
                      {device.features.BLE && (
                        <Badge
                          name="Bluetooth"
                          color="bg-blue-500"
                          icon={<FiBluetooth />}
                        />
                      )}
                      {device.features.WiFi && (
                        <Badge
                          name="WiFi"
                          color="bg-orange-500"
                          icon={<FiWifi />}
                        />
                      )}
                    </div>
                  </motion.div>
                </>
              )}
            </AnimatePresence>
          </motion.div>
          <div
            className={`h-7 bg-base opacity-0 md:h-auto md:w-7 ${
              hideDetails ? 'flex' : 'hidden'
            }`}
          />
        </motion.div>
      </div>
      <div className="z-[1] mt-[25%] flex h-full flex-col md:ml-[20%] md:mt-0 md:w-4/5">
        <div className="z-0 hidden pb-2 md:flex">
          <VariantSelectButton options={device.variants} />
        </div>
        <div
          className={`mt-1 flex flex-grow rounded-2xl bg-base p-2 shadow-inner transition-opacity duration-100 ease-linear md:mt-0 md:rounded-l-none md:rounded-r-2xl md:p-4 ${
            hideDetails ? 'opacity-0' : 'opacity-100'
          }`}
        >
          <Tab.Group
            as="div"
            className="flex flex-grow flex-col rounded-2xl bg-primary p-2"
          >
            <Tab.List className="flex gap-2">
              <CardTab title="Info" />
              <CardTab title="Power" />
              <CardTab title="Pinout" />
            </Tab.List>
            <Tab.Panels as="div" className="flex-grow overflow-y-auto">
              <InfoTab device={device} />
              <PowerTab device={device} />
              <PinoutTab device={device} />
            </Tab.Panels>
          </Tab.Group>
        </div>
      </div>
    </Modal>
  );
}