🚀 feat(ui): added manga with better UI

1 files changed, 116 insertions, 0 deletions

diff --git a/src/app/manga/components/inputContainer.jsx b/src/app/manga/components/inputContainer.jsx
new file mode 100644
index 0000000..7526f9a
--- /dev/null
+++ b/src/app/manga/components/inputContainer.jsx
@@ -0,0 +1,116 @@
+"use client";
+
+import {
+	Input,
+	Progress,
+	Card,
+	CardBody,
+	Image,
+	Chip,
+} from "@nextui-org/react";
+import Link from "next/link";
+import { useState } from "react";
+
+import { SearchedMangaResults } from "./requests";
+
+const MangaSearchBox = () => {
+	const [searchedMangaTitle, setMangaSearchedTitle] = useState("");
+	const [results, setResults] = useState(
+		<div className="mt-4 w-full">
+			<p className="text-center">
+				Start typing and results will show here
+			</p>
+		</div>,
+	);
+	const [loading, setLoading] = useState(<></>);
+
+	async function GetResults() {
+		if (!searchedMangaTitle) {
+			setResults(<></>);
+			return;
+		}
+		setLoading(
+			<Progress
+				size="sm"
+				isIndeterminate
+				aria-label="Loading..."
+				className="mb-4 mt-4 w-full"
+			/>,
+		);
+		const data = await SearchedMangaResults(searchedMangaTitle);
+		const format = (
+			<div className="mt-2 w-full">
+				{data && data.results.length > 0 ? (
+					data.results.map((item, index) => (
+						<Link href={`/manga/${item.id}`} key={index}>
+							<Card
+								isPressable
+								isBlurred
+								isHoverable
+								shadow="sm"
+								className="mb-2 flex w-full flex-row items-center"
+							>
+								<Image
+									src={item.image}
+									width={150}
+									isBlurred
+									shadow="sm"
+									className="p-1"
+								/>
+								<CardBody>
+									<p className="text-xl">
+										{item.title.english ||
+											item.title.romaji}
+									</p>
+									<section>
+										{item.genres &&
+											item.genres.map((item, index) => (
+												<Chip
+													key={index}
+													size="sm"
+													color="warning"
+													variant="faded"
+													className="mr-1"
+												>
+													{item}
+												</Chip>
+											))}
+									</section>
+								</CardBody>
+							</Card>
+						</Link>
+					))
+				) : (
+					<p className="text-center">
+						No results found for the searched title
+					</p>
+				)}
+			</div>
+		);
+		setLoading(<></>);
+		setResults(format);
+	}
+	return (
+		<main>
+			<div className="flex w-full flex-wrap">
+				<Input
+					type="text"
+					autoFocus
+					label="Manga"
+					placeholder="Enter manga/manhwa title"
+					value={searchedMangaTitle}
+					onChange={(event) => {
+						setMangaSearchedTitle(event.target.value);
+					}}
+					onKeyDown={async () => {
+						await GetResults();
+					}}
+				/>
+				{loading}
+				{results}
+			</div>
+		</main>
+	);
+};
+
+export default MangaSearchBox;