@fortawesome/free-regular-svg-icons#faArrowAltCircleRight TypeScript Examples

The following examples show how to use @fortawesome/free-regular-svg-icons#faArrowAltCircleRight. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Tidbit.tsx    From frontend.ro with MIT License 6 votes vote down vote up 
NextTidbitLink = ({ nextTidbit }: { nextTidbit: TidbitI }) => (
  <Link href={`/tidbits/${nextTidbit.tidbitId}/1`}>
    <a
      className={`
        ${styles['next-tidbit']}
        d-flex
        text-2xl
        absolute
        text-bold
        no-underline
        align-items-center
      `}
      style={{ backgroundImage: `url(${nextTidbit.items[0].imageSrc})` }}
    >
      <span className="d-flex relative w-100">
        <FontAwesomeIcon width={24} icon={faArrowAltCircleRight} />
        <span className="ml-2"> Next Tidbit </span>
      </span>
    </a>
  </Link>
)
Example #2
Source File: LandingTidbits.tsx    From frontend.ro with MIT License 4 votes vote down vote up 
LandingTidbits = ({ tidbits }: { tidbits: TidbitI[] }) => {
  const { ref, inView } = useInView({
    threshold: 0.4,
    triggerOnce: true,
  });

  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    if (!inView) {
      return noop;
    }

    const TIMEOUT_DURATION = 3000;
    const timeoutId = setTimeout(nextPage, TIMEOUT_DURATION);

    return () => {
      clearTimeout(timeoutId);
    };
  }, [currentIndex, inView]);

  const nextPage = () => {
    if (currentIndex + 1 === tidbits.length) {
      setCurrentIndex(0);
    } else {
      setCurrentIndex(currentIndex + 1);
    }
  };

  const previousPage = () => {
    if (currentIndex === 0) {
      setCurrentIndex(tidbits.length - 1);
    } else {
      setCurrentIndex(currentIndex - 1);
    }
  };

  return (
    <section
      className={`
        ${styles.LandingTidbits}
        d-flex
        align-items-center
        justify-content-between
      `}
      style={{
        backgroundColor: tidbits[currentIndex].backgroundColor,
        color: tidbits[currentIndex].textColor,
      }}
      ref={ref}
    >
      <div className={`${styles.about} d-flex flex-column justify-content-between`}>
        <a
          rel="noreferrer"
          href={`/tidbits/${tidbits[currentIndex].tidbitId}/${currentIndex + 1}`}
          className={`${styles['heading-link']} no-underline`}
        >
          <h2 className={`${styles.heading} m-0`}>
            {tidbits[currentIndex].title}
          </h2>
        </a>
        <div className={styles.controls}>
          <div>
            <Button variant="transparent" onClick={previousPage}>
              <FontAwesomeIcon width={32} icon={faArrowAltCircleLeft} />
            </Button>
            <Button variant="transparent" onClick={nextPage}>
              <FontAwesomeIcon width={32} icon={faArrowAltCircleRight} />
            </Button>
          </div>
          {inView && (
            <Progress key={currentIndex} color={tidbits[currentIndex].textColor} />
          )}
        </div>
      </div>
      <StackedImages
        images={tidbits.map((t, index) => ({
          href: `/tidbits/${tidbits[currentIndex].tidbitId}/${currentIndex + 1}`,
          alt: t.title,
          src: t.items[1].imageSrc,
        }))}
        rotationDelta={15}
        currentIndex={currentIndex}
        className={styles.StackedImages}
      />
    </section>
  );
}
Example #3
Source File: Tidbit.tsx    From frontend.ro with MIT License 4 votes vote down vote up 
Tidbit = ({ tidbit, index }: Props) => {
  const router = useRouter();
  const [nextTidbit, setNextTidbit] = useState<TidbitI>(null);
  const [previousTidbit, setPreviousTidbit] = useState<TidbitI>(null);

  const currentItem = tidbit.items[index];

  const isFirstItem = index === 0;
  const isLastItem = index === tidbit.items.length - 1;

  const increaseViewCount = async () => {
    try {
      await TidbitService.increaseTidbitView(tidbit.tidbitId);
    } catch (err) {
      // We want to silently fail this function because
      // it's not mission critical.
      console.warn(`Couldn't increase view count for tidbit ${tidbit.tidbitId}. Is the server down?`, err);
    }
  };

  useEffect(() => {
    TidbitService.getPreviousAndNextTidbit(tidbit.tidbitId)
      .then((response) => {
        setNextTidbit(response.next);
        setPreviousTidbit(response.previous);
      })
      .catch((err) => {
        console.error('[TidbitPage.useEffect] got while fetching next tidbit', err);
      });

    increaseViewCount();
  }, [tidbit.tidbitId]);

  useKeyDown('ArrowRight', () => {
    if (!isLastItem) {
      // We're doing `+2` because the index in the URL path starts from 0
      router.replace(`/tidbits/${tidbit.tidbitId}/${index + 2}`);
    }
  }, [index]);
  useKeyDown('ArrowLeft', () => {
    if (!isFirstItem) {
      router.push(`/tidbits/${tidbit.tidbitId}/${index}`);
    }
  }, [index]);

  return (
    <main className={styles.Tidbit}>
      <div className={`${styles.hero} d-flex relative justify-content-evenly align-items-center overflow-hidden`}>
        {isFirstItem && previousTidbit && (<PrevTidbitLink previousTidbit={previousTidbit} />)}

        <Link href={`/tidbits/${tidbit.tidbitId}/${index}`}>
          <a className={`
            ${styles['arrow-link']}
            ${styles['arrow-link--left']}
            ${isFirstItem ? 'invisible' : ''}
          `}
          >
            <FontAwesomeIcon width={48} icon={faArrowAltCircleLeft} />
          </a>
        </Link>
        <BaseTidbitItem
          controls
          title={tidbit.title}
          src={currentItem.imageSrc}
          className={`${styles['main-image']} d-block`}
        />
        <Link href={`/tidbits/${tidbit.tidbitId}/${index + 2}`}>
          <a className={`
              ${styles['arrow-link']}
              ${styles['arrow-link--right']}
              ${isLastItem ? 'invisible' : ''}
            `}
          >
            <FontAwesomeIcon width={48} icon={faArrowAltCircleRight} />
          </a>
        </Link>

        {isLastItem && nextTidbit && (<NextTidbitLink nextTidbit={nextTidbit} />)}
      </div>

      {currentItem.codeSnippets !== undefined && (
        <div className={`${styles['center-container']} d-flex flex-column align-items-center`}>
          {currentItem.codeSnippets.map((codeSnippet, index) => (
            <Highlight
              // eslint-disable-next-line react/no-array-index-key
              key={index}
              code={codeSnippet}
              className={`${styles['code-snippet']} mt-8 mb-8`}
              language={currentItem.language as Language}
            />
          ))}
        </div>
      )}

      <div className={styles['center-container']}>
        <div className={styles.grid}>
          {tidbit.items.map((item, itemIndex) => (
            <TidbitGalleryItem
              // eslint-disable-next-line react/no-array-index-key
              key={itemIndex}
              tidbit={tidbit}
              itemIndex={itemIndex}
              active={itemIndex === index}
            />
          ))}
        </div>
        <nav className={`${styles['footer-nav']} d-flex justify-content-between mb-8`}>
          <Link href={previousTidbit !== null ? `/tidbits/${previousTidbit.tidbitId}/1` : '/tidbits'}>
            <a className="d-flex">
              <FontAwesomeIcon className="mr-2" width={14} icon={faArrowLeft} />
              {previousTidbit !== null ? previousTidbit.title : 'Toate Tidbit\'s-urile'}
            </a>
          </Link>

          {nextTidbit !== null && (
            <Link href={`/tidbits/${nextTidbit.tidbitId}/1`}>
              <a className="d-flex justify-content-end">
                {nextTidbit.title}
                <FontAwesomeIcon className="ml-2" width={14} icon={faArrowRight} />
              </a>
            </Link>
          )}
        </nav>
      </div>
    </main>
  );
}
Example #4
Source File: theme.ts    From NextJS-NestJS-GraphQL-Starter with MIT License 4 votes vote down vote up 
theme: ThemeConfig = {
  Popover: {
    Title: {
      styles: {
        base: {
          paddingRight: 'major-1'
        }
      }
    }
  },
  Tooltip: {
    Content: {
      styles: {
        base: css`
          z-index: 999;
        `
      }
    }
  },
  PageWithSidebar: {
    styles: {
      base: css`
        z-index: 10;
        position: relative;
      `
    }
  },
  PageWithHeader: {
    styles: {
      base: css`
        display: flex;
        flex-direction: column;
        .bb-PageWithHeaderContent {
          display: flex;
          flex-direction: column;
          flex: 1;
        }
        .bb-PageContentWrapper {
          flex-grow: 1;
          flex-shrink: 1;
          flex-basis: 0%;
        }
      `
    }
  },
  Container: {
    styles: {
      fluid: {
        maxWidth: '100%'
      }
    }
  },
  Icon: {
    styles: {
      base: {
        color: 'text300'
      }
    },
    iconSets: [
      {
        icons: [
          faComment,
          faThumbsUp,
          faBookmark,
          faTrashAlt,
          faPlusSquare,
          faFileCode,
          faArrowAltCircleLeft,
          faArrowAltCircleRight,
          faShareSquare,
          faImage
        ],
        prefix: 'r-',
        type: 'font-awesome'
      },
      {
        icons: [faMarkdown, faJs, faGithub, faReddit, faGoogle],
        prefix: 'b-',
        type: 'font-awesome'
      }
    ]
  },
  global: {
    fontSize: 16,
    styles: {
      base: {
        color: 'text300'
      }
    }
  },
  fonts: {
    // default: 'Comic Sans MS'
  },
  palette: {
    primary: '#d504f8'
  },
  breakpoints: {
    mobile: 520,
    tablet: 960
  },
  SelectMenu: {
    styles: {
      base: {
        backgroundColor: 'white'
      }
    }
  },
  Button: {
    styles: {
      base: {
        color: 'white'
      },
      ghost: {
        color: 'primary',
        borderColor: 'primary',
        borderWidth: '1px',
        borderStyle: 'solid'
      },
      outlined: {
        borderColor: 'primary',
        borderWidth: '1px',
        borderStyle: 'solid'
      }
    },

    defaultProps: {
      palette: 'primary'
    }
  },
  Text: {
    styles: {
      base: {
        color: 'text300'
      }
    }
  },
  Heading: {
    styles: {
      base: {
        color: 'text300'
      }
    },

    h3: {
      styles: {
        base: {
          color: 'text300',
          fontSize: '1.25rem'
        }
      }
    }
  }
}