anima VS animechan

API LIMIT 100 requests / hour Website https://animechan.vercel.app/

import { useState, useEffect } from "react"; import { Link, useParams } from "react-router-dom"; import axios from "axios"; import styled from "styled-components"; import SmallQuote from "../../components/SmallQuote/SmallQuote"; const Animepage = () => { const param = useParams(); const [quotes, setQuotes] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { if (param?.name) { setLoading(true); const fetchAnimeQuotes = async () => { try { const res = await axios.get( `https://animechan.vercel.app/api/quotes/anime?title=${param?.name}` ); setQuotes(res?.data); setLoading(false); } catch (error) { console.log(error); setLoading(false); } }; fetchAnimeQuotes(); } }, [param]); return (

Quotes from {param?.name}

Go back

{loading ? (

Loading...

) : quotes?.length ? ( quotes?.map((quote, index) => (

)) ) : (

No Quote found 😞

)}

); }; const StyledAnimePage = styled.div` max-width: 80%; margin: 2rem auto; position: relative; & > a { position: absolute; top: 1rem; text-decoration: none; } & > h2 { font-weight: 400; letter-spacing: 3px; text-align: center; margin-bottom: 2rem; } & > .grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: max-content; & .anime { margin: 1rem; height: max-content; } & > p { margin: 2rem 0 4rem; font-size: 1.3rem; text-align: center; } } `; export default Animepage;

it is just an api that returns rand quote https://github.com/rocktimsaikia/anime-chan