added search functionality

1 files changed, 56 insertions, 0 deletions

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>
+	);
+}