✨ feat(ui): 🎨 migrate from vanilla css to tailwind css, adopted next ui and restructured

1 files changed, 57 insertions, 0 deletions

diff --git a/src/app/kdrama/components/searchBar.jsx b/src/app/kdrama/components/searchBar.jsx
new file mode 100644
index 0000000..5f5d89e
--- /dev/null
+++ b/src/app/kdrama/components/searchBar.jsx
@@ -0,0 +1,57 @@
+"use client";
+
+import React from "react";
+import { useState } from "react";
+import { Input, Progress } from "@nextui-org/react";
+
+import { SearchedDramaData } from "./requests";
+import SearchedDataFormatter from "./searchFormatter";
+import { PreFetchKdramaInfo } from "./cacher";
+
+export const Searchbar = () => {
+	const [loading, setLoading] = useState(<></>);
+	const [searchData, setSearchData] = useState(null);
+	const [searchTitle, setSearchTitle] = useState("");
+
+	async function handleSearchInput() {
+		setSearchData(null);
+		setLoading(
+			<Progress
+				size="sm"
+				isIndeterminate
+				aria-label="Loading..."
+				className="w-full"
+			/>
+		);
+		const data = await SearchedDramaData(searchTitle);
+		PreFetchKdramaInfo(data);
+		const format = await SearchedDataFormatter(data);
+		setSearchData(format);
+		setLoading(<></>);
+	}
+
+	return (
+		<div>
+			<div className="flex w-full flex-wrap flex-col mt-2  md:flex-nowrap md:mx-2 gap-4 lg:w-1/2 lg:mx-2">
+				<Input
+					type="text"
+					label="Search for k-dramas here"
+					placeholder="Enter k-drama title"
+					color="default"
+					onChange={(event) => {
+						if (event.target.value.trim() !== "") {
+							setSearchTitle(event.target.value);
+						}
+					}}
+					onKeyDown={async (event) => {
+						if (event.key === "Enter" || event.code === "Enter") {
+							await handleSearchInput();
+						}
+					}}
+				/>
+				{loading}
+			</div>
+			<div className="w-full mt-2">{searchData}</div>
+		</div>
+	);
+};