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

PrevTidbitLink = ({ previousTidbit }: { previousTidbit: TidbitI }) => (
  <Link href={`/tidbits/${previousTidbit.tidbitId}/${previousTidbit.items.length}`}>
    <a
      className={`
        ${styles['prev-tidbit']}
        d-flex
        text-2xl
        absolute
        text-bold
        no-underline
        align-items-center
      `}
      style={{ backgroundImage: `url(${previousTidbit.items[0].imageSrc})` }}
    >
      <span className="d-flex relative w-100 justify-content-end">
        <span> Prev Tidbit </span>
        <FontAwesomeIcon className="ml-2" width={24} icon={faArrowAltCircleLeft} />
      </span>
    </a>
  </Link>
)

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

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

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