restructured files

4 files changed, 205 insertions, 0 deletions

diff --git a/src/app/anime/search/components/fetchInfo.js b/src/app/anime/search/components/fetchInfo.js
new file mode 100644
index 0000000..07b203d
--- /dev/null
+++ b/src/app/anime/search/components/fetchInfo.js
@@ -0,0 +1,14 @@
+"use server";
+
+export default async function Results(id) {
+	return await testFunction(id);
+}
+
+async function testFunction(title) {
+	const res = await fetch(
+		"https://consumet-api-di2e.onrender.com/anime/gogoanime/" + title,
+		{ cache: "force-cache" }
+	);
+	const data = await res.json();
+	return data;
+}
diff --git a/src/app/anime/search/components/fetchedInfo.js b/src/app/anime/search/components/fetchedInfo.js
new file mode 100644
index 0000000..17c9673
--- /dev/null
+++ b/src/app/anime/search/components/fetchedInfo.js
@@ -0,0 +1,44 @@
+import "../search.css";
+import Link from "next/link";
+import Image from "next/image";
+
+export default async function fetchedInfo(data) {
+	return (
+		<div className="animeEntry">
+			{data ? (
+				data.results && data.results.length > 0 ? (
+					data.results.map((item, index) => (
+						<Link
+							key={index}
+							href={`/anime/${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",
+								fontFamily: "Kanit",
+								fontSize: 18,
+							}}
+						>
+							No results found
+						</p>
+					</div>
+				)
+			) : null}
+		</div>
+	);
+}
diff --git a/src/app/anime/search/page.jsx b/src/app/anime/search/page.jsx
new file mode 100644
index 0000000..75f09bd
--- /dev/null
+++ b/src/app/anime/search/page.jsx
@@ -0,0 +1,67 @@
+"use client";
+
+import "./search.css";
+import { FaSearch } from "react-icons/fa"; // Import the search icon from react-icons library
+import { useState } from "react";
+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 [info, setInfo] = useState(null);
+
+	const handleKeyPress = async (event) => {
+		if (
+			(event.code === "Enter" ||
+				event.key === "Enter" ||
+				event.code === 13) &&
+			searchedAnime !== ""
+		) {
+			setLoading(true);
+			setInfo(await fetchedInfo(await Results(searchedAnime)));
+			setLoading(false);
+		} else if (
+			(event.code === "Enter" ||
+				event.key === "Enter" ||
+				event.code === 13) &&
+			searchedAnime === ""
+		) {
+			alert("Input cannot be empty");
+		}
+	};
+
+	return (
+		<div>
+			<div className="inputContainer">
+				<div className="searchContainer">
+					<FaSearch className="searchIcon" />
+					<input
+						onChange={(event) => {
+							if (event.target.value.trim() !== "") {
+								setSearchedAnime(event.target.value);
+							}
+						}}
+						onKeyDown={(event) => handleKeyPress(event)}
+						placeholder="Enter anime title"
+					></input>
+				</div>
+			</div>
+
+			{loading && (
+				<p
+					style={{
+						textAlign: "center",
+						fontFamily: "Kanit",
+						fontSize: 18,
+						color: "white",
+					}}
+				>
+					Please wait while we crunch all the data for you
+				</p>
+			)}
+
+			{info}
+		</div>
+	);
+}
diff --git a/src/app/anime/search/search.css b/src/app/anime/search/search.css
new file mode 100644
index 0000000..8afb508
--- /dev/null
+++ b/src/app/anime/search/search.css
@@ -0,0 +1,80 @@
+.inputContainer {
+	display: flex;
+	margin: 30px auto;
+}
+
+.searchContainer input {
+	border: none;
+	border-radius: 5px;
+	color: white;
+	outline: none;
+	background: none;
+	width: 100%;
+	font-family: "Lato";
+	font-size: 16px;
+}
+
+.searchContainer {
+	display: flex;
+	align-items: center;
+	margin: 0px auto;
+	background-color: #2c2c2c;
+	padding: 8px;
+	border-radius: 5px;
+	width: 20%;
+}
+
+.searchIcon {
+	color: white;
+	margin-right: 5px;
+}
+
+.animeEntry {
+	display: flex;
+	overflow-x: auto;
+}
+
+.animeEntry::-webkit-scrollbar {
+	height: 7px;
+}
+
+.animeEntry::-webkit-scrollbar-track {
+	background-color: #636363;
+	border-radius: 5px;
+}
+
+.animeEntry::-webkit-scrollbar-thumb {
+	background-color: rgba(196, 196, 196, 0.692);
+	border-radius: 5px;
+
+}
+
+.anime {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 10px;
+	border-style: dotted;
+	border-color: #636363;
+	margin: 10px;
+	border-radius: 10px;
+	border-width: 4px;
+}
+
+.anime p {
+	color: white;
+	width: 25dvh;
+	font-family: "Lato";
+	font-size: 18px;
+}
+
+.animeImage {
+	border-radius: 10px;
+	margin-left: 20px;
+}
+
+@media screen and (max-width: 768px) {
+	.searchContainer {
+		width: 70%;
+	}
+}
\ No newline at end of file