added search functionality

7 files changed, 159 insertions, 8 deletions

diff --git a/src/app/kdrama/[id]/page.jsx b/src/app/kdrama/[id]/page.jsx
index c891a0b..baaf24e 100644
--- a/src/app/kdrama/[id]/page.jsx
+++ b/src/app/kdrama/[id]/page.jsx
@@ -1,13 +1,13 @@
 import styles from "../styles/info.module.css";
 import Image from "next/image";
 import EpisodesButtons from "./buttons";
-import VideoLinkCacher from "../components/cacher";
+import PreFetchVideoLinks from "../components/cacher";
 
 export default async function DramaInfo({ params }) {
 	const id = decodeURIComponent(params.id);
 	const info = await getDramaInfo(id);
 
-	await VideoLinkCacher(info.episodes, id);
+	PreFetchVideoLinks(info.episodes, id);
 
 	return (
 		<div className={styles.Main}>
diff --git a/src/app/kdrama/components/cacher.js b/src/app/kdrama/components/cacher.js
index 3ef05be..b04c932 100644
--- a/src/app/kdrama/components/cacher.js
+++ b/src/app/kdrama/components/cacher.js
@@ -1,8 +1,15 @@
-// This file pre fetches all the videolinks and next js automatically caches them!
+// This function pre-fetches all the video links for a drama in the background
 
-export default async function VideoLinkCacher(data, dramaId) {
-	data.forEach(async (element) => {
-		const link = `https://consumet-api-di2e.onrender.com/movies/dramacool/watch?episodeId=${element.id}&mediaId=${dramaId}`;
-		await fetch(link, { cache: "force-cache" });
-	});
+export default async function PreFetchVideoLinks(data, dramaId) {
+	try {
+		const fetchPromises = data.map(async (element) => {
+			const link = `https://consumet-api-di2e.onrender.com/movies/dramacool/watch?episodeId=${element.id}&mediaId=${dramaId}`;
+			await fetch(link, { cache: "force-cache" });
+		});
+
+		await Promise.all(fetchPromises);
+		console.log("Video links pre-fetched successfully!");
+	} catch (error) {
+		console.error("Error occurred while pre-fetching video links:", error);
+	}
 }
diff --git a/src/app/kdrama/components/search.jsx b/src/app/kdrama/components/search.jsx
new file mode 100644
index 0000000..4c9d00c
--- /dev/null
+++ b/src/app/kdrama/components/search.jsx
@@ -0,0 +1,56 @@
+"use client";
+
+import styles from "../styles/search.module.css";
+import { useState } from "react";
+import { FaSearch } from "react-icons/fa";
+import FetchSearchTitle from "./searchQuery";
+import Image from "next/image";
+import Link from "next/link";
+
+export default function DramaSearch() {
+	const [title, setTitle] = useState("");
+	const [infoTitle, setInfoTitle] = useState(null);
+
+	async function getSearchResults(title) {
+		const data = await FetchSearchTitle(title);
+		setInfoTitle(data);
+	}
+
+	return (
+		<div className={styles.SearchContainer}>
+			<div className={styles.Search}>
+				<FaSearch color="white" size={16} />
+				<input
+					placeholder="Search for drama"
+					onChange={(event) => setTitle(event.target.value)}
+					onKeyDown={async (e) => {
+						if ((e.key === "Enter" || e.code === 13) && title) {
+							await getSearchResults(e.target.value);
+						}
+					}}
+				></input>
+			</div>
+
+			<div className={styles.SearchResults}>
+				{infoTitle &&
+					infoTitle.results.map((item, index) => (
+						<Link
+							href={`/kdrama/${encodeURIComponent(item.id)}`}
+							style={{ textDecoration: "none" }}
+							key={index}
+						>
+							<div className={styles.SearchEntry}>
+								<p>{item.title}</p>
+								<Image
+									src={item.image}
+									width={110}
+									height={180}
+									alt="Drama Poster"
+								/>
+							</div>
+						</Link>
+					))}
+			</div>
+		</div>
+	);
+}
diff --git a/src/app/kdrama/components/searchQuery.js b/src/app/kdrama/components/searchQuery.js
new file mode 100644
index 0000000..64e428b
--- /dev/null
+++ b/src/app/kdrama/components/searchQuery.js
@@ -0,0 +1,8 @@
+export default async function FetchSearchTitle(title) {
+	const res = await fetch(
+		`https://consumet-api-di2e.onrender.com/movies/dramacool/${title}`,
+		{ cache: "force-cache" }
+	);
+	const data = await res.json();
+	return data;
+}
diff --git a/src/app/kdrama/page.jsx b/src/app/kdrama/page.jsx
index 34b1766..44f8eb9 100644
--- a/src/app/kdrama/page.jsx
+++ b/src/app/kdrama/page.jsx
@@ -1,10 +1,12 @@
 import styles from "./styles/kdrama.module.css";
 import PopularDramas from "./components/popular";
 import RecentDramas from "./components/recent";
+import DramaSearch from "./components/search";
 
 export default async function Kdrama() {
 	return (
 		<div className={styles.Main}>
+			<DramaSearch />
 			<PopularDramas />
 			<RecentDramas />
 		</div>
diff --git a/src/app/kdrama/styles/info.module.css b/src/app/kdrama/styles/info.module.css
index cc4ebe8..90a33b5 100644
--- a/src/app/kdrama/styles/info.module.css
+++ b/src/app/kdrama/styles/info.module.css
@@ -79,6 +79,7 @@
 	transition: background-color 0.2s linear;
 	color: white;
 	cursor: pointer;
+	width: 100px;
 }
 
 .EpisodeButtons button:hover {
diff --git a/src/app/kdrama/styles/search.module.css b/src/app/kdrama/styles/search.module.css
new file mode 100644
index 0000000..5f61c23
--- /dev/null
+++ b/src/app/kdrama/styles/search.module.css
@@ -0,0 +1,77 @@
+.SearchContainer {
+	margin: 20px 0px -20px 0px;
+}
+
+.Search {
+	padding: 5px;
+	background-color: #121212;
+	display: flex;
+	align-items: center;
+	max-width: 30%;
+	border-radius: 10px;
+}
+
+.SearchContainer input {
+	margin-left: 5px;
+	padding: 5px;
+	border: none;
+	outline: none;
+	background-color: #121212;
+	font-size: 16px;
+	font-family: "Atkinson Hyperlegible";
+	color: white;
+	width: 100%;
+}
+
+.SearchResults {
+	display: flex;
+	margin-top: 10px;
+	overflow-x: auto;
+}
+
+.SearchResults::-webkit-scrollbar {
+	height: 5px;
+}
+
+.SearchResults::-webkit-scrollbar-track {
+	background-color: #3333339d;
+	border-radius: 5px;
+}
+
+.SearchResults::-webkit-scrollbar-thumb {
+	background-color: rgb(68, 68, 68);
+	border-radius: 5px;
+}
+
+.SearchEntry {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin: 5px;
+	padding: 6px;
+	background-color: #2e2e2eab;
+	border-radius: 10px;
+	cursor: pointer;
+	transition: transform 0.2s linear;
+}
+
+.SearchEntry:hover {
+	transition: transform 0.2s linear;
+	transform: scale(1.01);
+}
+
+.SearchEntry p {
+	color: white;
+	font-family: "Atkinson Hyperlegible";
+	width: 40vh;
+}
+
+.SearchEntry img {
+	border-radius: 10px;
+}
+
+@media screen and (max-width: 768px) {
+	.Search {
+		max-width: 100%;
+	}
+}
\ No newline at end of file