1 files changed, 38 insertions, 0 deletions
diff --git a/src/app/movies/components/search.jsx b/src/app/movies/components/search.jsx
new file mode 100644
index 0000000..6514b76
--- /dev/null
+++ b/src/app/movies/components/search.jsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { useState } from "react";
+import styles from "../styles/search.module.css";
+import { FaSearch } from "react-icons/fa";
+import SearchResults from "./search_2";
+
+export default function SEARCH_COMPONENT() {
+	const [title, setTitle] = useState("");
+	const [result, setResults] = useState(null);
+
+	const fetch_results = async (title) => {
+		setResults(await SearchResults(title));
+	};
+
+	return (
+		<main className={styles.Main}>
+			<section className={styles.InputContainer}>
+				<FaSearch
+					color="white"
+					className={styles.SearchIcon}
+					size={17}
+				/>
+				<input
+					placeholder="Enter movie title here"
+					onChange={(event) => setTitle(event.target.value)}
+					onKeyDown={async (e) => {
+						if ((e.key === "Enter" || e.code === 13) && title) {
+							await fetch_results(e.target.value);
+						}
+					}}
+				></input>
+			</section>
+
+			<section className={styles.SearchResults}>{result}</section>
+		</main>
+	);
+}