From bc2963f9e76a4000e3f1747b6fa4affdebba3956 Mon Sep 17 00:00:00 2001 From: real-zephex Date: Sun, 17 Mar 2024 07:08:55 +0530 Subject: prettified the code :) --- src/app/search/page.js | 99 +++++++++++++++++++++++++------------------------- 1 file changed, 49 insertions(+), 50 deletions(-) (limited to 'src/app/search') diff --git a/src/app/search/page.js b/src/app/search/page.js index f384d85..e6d4f08 100644 --- a/src/app/search/page.js +++ b/src/app/search/page.js @@ -1,93 +1,92 @@ -"use client" +"use client"; -import './search.css' -import { FaSearch } from 'react-icons/fa'; // Import the search icon from react-icons library -import { useState } from 'react'; -import Image from 'next/image'; -import Link from 'next/link'; +import "./search.css"; +import { FaSearch } from "react-icons/fa"; // Import the search icon from react-icons library +import { useState } from "react"; +import Image from "next/image"; +import Link from "next/link"; export default function Input() { - - const [searchedAnime, setSearchedAnime] = useState(null) - const [loading, setLoading] = useState(null) + const [searchedAnime, setSearchedAnime] = useState(null); + const [loading, setLoading] = useState(null); const handleKeyPress = (event) => { if ( - (event.code === "Enter" || - event.key === "Enter" || - event.code === 13) && + (event.code === "Enter" || + event.key === "Enter" || + event.code === 13) && searchedAnime != "" ) { - fetch_animes(searchedAnime) + fetch_animes(searchedAnime); } else if ( - (event.code === "Enter" || - event.key === "Enter" || - event.code === 13) && + (event.code === "Enter" || + event.key === "Enter" || + event.code === 13) && searchedAnime === "" - ) { - alert("Input cannot be empty") + ) { + alert("Input cannot be empty"); } - } + }; 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) - setLoading(false) - } - ) - } + .then((res) => res.json()) + .then((data) => { + setSearch(data); + setLoading(false); + }); + }; return (
-
-
- - setSearchedAnime(event.target.value)} +
+
+ + + setSearchedAnime(event.target.value) + } onKeyDown={(event) => handleKeyPress(event)} - placeholder='Enter anime title'> - - + placeholder="Enter anime title" + >
- {loading && ( -

- Please wait while we crunch all the data for you. +

+ Please wait while we crunch all the data for you.

)} -
+
{search1 ? ( search1.results && search1.results.length > 0 ? ( search1.results.map((item, index) => ( - -
+ +

{item.title}

- Drama Poster
)) ) : ( -
-

No results found

+
+

No results found

) ) : null}
-
- - ) -} \ No newline at end of file + ); +} -- cgit v1.2.3