diff options
Diffstat (limited to 'src/app/search/page.js')
| -rw-r--r-- | src/app/search/page.js | 44 |
1 files changed, 31 insertions, 13 deletions
diff --git a/src/app/search/page.js b/src/app/search/page.js index c64030c..f384d85 100644 --- a/src/app/search/page.js +++ b/src/app/search/page.js @@ -9,6 +9,7 @@ import Link from 'next/link'; export default function Input() { const [searchedAnime, setSearchedAnime] = useState(null) + const [loading, setLoading] = useState(null) const handleKeyPress = (event) => { if ( @@ -31,11 +32,12 @@ export default function Input() { const [search1, setSearch] = useState(null); const fetch_animes = (title) => { fetch("https://dramalama-api.vercel.app/anime/gogoanime/" + title) + .then(setLoading(true)) .then(res => res.json()) .then( data => { setSearch(data) - console.log(search1) + setLoading(false) } ) } @@ -54,21 +56,37 @@ export default function Input() { </div> </div> + + {loading && ( + <p style={{color: "white", textAlign: "center"}}> + Please wait while we crunch all the data for you. + </p> + )} <div className='animeEntry'> - {search1 && search1.results.map((item, index) => ( - <Link key={index} href={`/info/${item.id}`} style={{textDecoration: "none"}}> - <div className='anime'> - <p>{item.title}</p> - <Image - src={item.image} - className='animeImage' - width={120} - height={160} - /> + {search1 ? ( + search1.results && search1.results.length > 0 ? ( + search1.results.map((item, index) => ( + <Link key={index} href={`/info/${item.id}`} style={{textDecoration: "none"}}> + <div className='anime'> + <p>{item.title}</p> + <Image + src={item.image} + className='animeImage' + width={120} + height={160} + alt='Drama Poster' + /> + </div> + </Link> + )) + ) : ( + <div style={{margin: "0px auto"}}> + <p style={{color: "white"}}>No results found</p> </div> - </Link> - ))} + ) + ) : null} </div> + </div> ) |