1 files changed, 21 insertions, 40 deletions

diff --git a/src/app/search/page.jsx b/src/app/search/page.jsx
index 00309f6..75f09bd 100644
--- a/src/app/search/page.jsx
+++ b/src/app/search/page.jsx
@@ -3,25 +3,23 @@
 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 testFunction from "./api/fetchInfo";
+import Results from "./components/fetchInfo";
+import fetchedInfo from "./components/fetchedInfo";
 
 export default function Input() {
 	const [searchedAnime, setSearchedAnime] = useState(null);
 	const [loading, setLoading] = useState(null);
-	const [search1, setSearch] = useState(null);
+	const [info, setInfo] = useState(null);
 
 	const handleKeyPress = async (event) => {
 		if (
 			(event.code === "Enter" ||
 				event.key === "Enter" ||
 				event.code === 13) &&
-			searchedAnime != ""
+			searchedAnime !== ""
 		) {
 			setLoading(true);
-			let x = await testFunction(searchedAnime);
-			setSearch(x);
+			setInfo(await fetchedInfo(await Results(searchedAnime)));
 			setLoading(false);
 		} else if (
 			(event.code === "Enter" ||
@@ -39,9 +37,11 @@ export default function Input() {
 				<div className="searchContainer">
 					<FaSearch className="searchIcon" />
 					<input
-						onChange={(event) =>
-							setSearchedAnime(event.target.value)
-						}
+						onChange={(event) => {
+							if (event.target.value.trim() !== "") {
+								setSearchedAnime(event.target.value);
+							}
+						}}
 						onKeyDown={(event) => handleKeyPress(event)}
 						placeholder="Enter anime title"
 					></input>
@@ -49,38 +49,19 @@ export default function Input() {
 			</div>
 
 			{loading && (
-				<p style={{ color: "white", textAlign: "center" }}>
-					Please wait while we crunch all the data for you.
+				<p
+					style={{
+						textAlign: "center",
+						fontFamily: "Kanit",
+						fontSize: 18,
+						color: "white",
+					}}
+				>
+					Please wait while we crunch all the data for you
 				</p>
 			)}
-			<div className="animeEntry">
-				{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>
-					)
-				) : null}
-			</div>
+
+			{info}
 		</div>
 	);
 }