Origho-precious

import React from "react";
import ReactDOM from "react-dom";
import { RecoilRoot } from "recoil";
import "./index.css";
import App from "./App";

ReactDOM.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>,

Origho-precious

import styled from "styled-components";

const Quote = () => {
  const quote = {
    anime: "Naruto",
    character: "Pain",
    quote:
      "Because of the existence of love - sacrifice is born. As well as hate. Then one comprehends... one knows PAIN.",
  };

Origho-precious

import { Link } from "react-router-dom";
import styled from "styled-components";

const AnimePill = ({ anime, color }) => {
  return (
    <StyledPill style={{ background: color }}>
      <Link to={`/anime/${anime}`}>{anime}</Link>
    </StyledPill>
  );
};

Origho-precious

import styled from "styled-components";

const SmallQuote = ({ quote, character, anime }) => {
  return (
    <StyledQuote>
      <p>"{quote}"</p>
      <h4>
        <span className="character">{character}</span> <em>in</em>
        <span className="anime">{anime}</span>
      </h4>

Origho-precious

import { atom } from "recoil";

export const animeTitles = atom({
  key: "animeTitleList",
  default: [],
});

Origho-precious

export const animeListPageNum = atom({
  key: "animeListPageNum",
  default: 0,
});

Origho-precious

export const animeListPageNum = atom({
  key: "animeListPageNum",
  default: 0,
});

Origho-precious

export const slicedAnimeTitles = selector({
  key: "slicedAnimeTitles",
  get: ({ get }) => {
    const animes = get(animeTitles);
    const pageNum = get(animeListPageNum);

    const newAnimeList = [...animes];
    const arrIndex = pageNum === 0 ? 0 : pageNum * 50 + 1;

    return newAnimeList.splice(arrIndex, 50);

Origho-precious

import { useState, useEffect } from "react";
import { useRecoilState } from "recoil";
import styled from "styled-components";
import { animeListPageNum } from "../../store";

const Pagination = ({ listLength }) => {
  const [pageNum, setPageNum] = useRecoilState(animeListPageNum);
  const [numsArr, setNumsArr] = useState([]);

Origho-precious

useEffect(() => {
    const paginationNums = () => {
      const max = Math.floor(listLength / 50);
      let nums = [];
      for (let i = 0; i <= max; i++) {
        nums.push(max - i);
      }
      setNumsArr(
        nums.sort((a, b) => {
          return a - b;