🚀 feat(download): implement direct manga downloads

6 files changed, 91 insertions, 65 deletions

diff --git a/next.config.mjs b/next.config.mjs
index f865694..c587eaf 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -51,11 +51,11 @@ const nextConfig = {
 		},

 	},

 

-	experimental: {

-		serverActions: {

-			allowedOrigins: ["localhost:3000"],

-		},

-	},

+	// experimental: {

+	// 	serverActions: {

+	// 		allowedOrigins: ["localhost:3000"],

+	// 	},

+	// },

 };

 

 export default nextConfig;

diff --git a/package.json b/package.json
index a4b4b6c..e262285 100644
--- a/package.json
+++ b/package.json
@@ -1,35 +1,31 @@
 {
-  "name": "dramalama-next",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@nextui-org/react": "^2.3.6",
-    "@vercel/analytics": "^1.2.2",
-    "@vercel/postgres": "^0.7.2",
-    "@vercel/speed-insights": "^1.0.10",
-    "@vidstack/react": "^1.10.9",
-    "babel-plugin-react-compiler": "^0.0.0-experimental-487cb0e-20240529",
-    "child_process": "^1.0.2",
-    "framer-motion": "^11.2.6",
-    "media-icons": "^1.1.2",
-    "next": "^14.2.3",
-    "next-themes": "^0.3.0",
-    "react-icons": "^5.0.1",
-    "react-player": "^2.15.1",
-    "react-router-dom": "^6.22.3"
-  },
-  "devDependencies": {
-    "@types/node": "20.11.28",
-    "@types/react": "18.2.66",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^9",
-    "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3"
-  }
+	"name": "dramalama-next",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint"
+	},
+	"dependencies": {
+		"@nextui-org/react": "^2.3.6",
+		"@vidstack/react": "^1.10.9",
+		"child_process": "^1.0.2",
+		"framer-motion": "^11.2.6",
+		"media-icons": "^1.1.2",
+		"next": "^14.2.3",
+		"next-themes": "^0.3.0",
+		"react-icons": "^5.0.1",
+		"react-player": "^2.15.1",
+		"react-router-dom": "^6.22.3"
+	},
+	"devDependencies": {
+		"@types/node": "20.11.28",
+		"@types/react": "18.2.66",
+		"autoprefixer": "^10.4.19",
+		"eslint": "^9",
+		"postcss": "^8.4.38",
+		"tailwindcss": "^3.4.3"
+	}
 }
diff --git a/src/app/manga/components/chapterPages.jsx b/src/app/manga/components/chapterPages.jsx
index c403357..8e14a89 100644
--- a/src/app/manga/components/chapterPages.jsx
+++ b/src/app/manga/components/chapterPages.jsx
@@ -21,7 +21,7 @@ const MangaChapters = async (id) => {
 							src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item}&referer=https://mangadex.org`}
 							width={1280}
 							height={720}
-							className="h-auto w-auto"
+							className="h-auto w-auto rounded-md"
 							alt="Manga Pages"
 						/>
 						<p className="text-center">{index}</p>
diff --git a/src/app/manga/components/descriptionTabs.jsx b/src/app/manga/components/descriptionTabs.jsx
index 19191ab..b7fe612 100644
--- a/src/app/manga/components/descriptionTabs.jsx
+++ b/src/app/manga/components/descriptionTabs.jsx
@@ -9,6 +9,7 @@ import {
 	Image,
 	Select,
 	SelectItem,
+	Button,
 } from "@nextui-org/react";
 import { FaRegThumbsUp, FaRegStar } from "react-icons/fa";
 import Link from "next/link";
@@ -18,9 +19,11 @@ import MangaChapters from "./chapterPages";
 
 const MangaDescriptionTabs = ({ data }) => {
 	const [pages, setPages] = useState(<></>);
+	const [url, setUrl] = useState("");
 
 	async function get_pages(id) {
 		setPages(<p className="text-center">Loading...</p>);
+		setUrl(`https://manga-downloader-api.vercel.app/${id}`);
 		const data = await MangaChapters(id);
 		setPages(data);
 	}
@@ -121,31 +124,43 @@ const MangaDescriptionTabs = ({ data }) => {
 				</Tab>
 				<Tab key="chapter" title="Chapter">
 					<Card shadow="sm" className="p-2">
-						<Select
-							className="w-full lg:max-w-md"
-							label="Select chapter"
-						>
-							{data.chapters &&
-								data.chapters.length > 0 &&
-								data.chapters.map((item, index) => {
-									if (item.pages > 0) {
-										return (
-											<SelectItem
-												key={index}
-												onClick={async () =>
-													await get_pages(item.id)
-												}
-												textValue={item.title}
-											>
-												{item.title} -{" "}
-												{item.chapterNumber}
-											</SelectItem>
-										);
-									} else {
-										return;
-									}
-								})}
-						</Select>
+						<div className="flex items-center">
+							<Select
+								className="w-full lg:max-w-md"
+								label="Select chapter"
+							>
+								{data.chapters &&
+									data.chapters.length > 0 &&
+									data.chapters.map((item, index) => {
+										if (item.pages > 0) {
+											return (
+												<SelectItem
+													key={index}
+													onClick={async () =>
+														await get_pages(item.id)
+													}
+													textValue={item.title}
+												>
+													{item.title} -{" "}
+													{item.chapterNumber}
+												</SelectItem>
+											);
+										} else {
+											return;
+										}
+									})}
+							</Select>
+							<Button
+								as={Link}
+								href={url}
+								className="mt-2 ml-2"
+								size="lg"
+								color="warning"
+								variant="ghost"
+							>
+								Download
+							</Button>
+						</div>
 						<CardBody>
 							<div className="w-full">{pages}</div>
 						</CardBody>
diff --git a/src/app/manga/components/downloadButton.jsx b/src/app/manga/components/downloadButton.jsx
new file mode 100644
index 0000000..0942dfb
--- /dev/null
+++ b/src/app/manga/components/downloadButton.jsx
@@ -0,0 +1,15 @@
+import { Button } from "@nextui-org/react";
+import Link from "next/link";
+
+const DownloadButton = async ({ id: id }) => {
+	return (
+		<Button
+			as={Link}
+			href={`https://manga-downloader-api.vercel.app/${id}`}
+		>
+			Download
+		</Button>
+	);
+};
+
+export default DownloadButton;
diff --git a/src/app/manga/components/inputContainer.jsx b/src/app/manga/components/inputContainer.jsx
index 10b0a73..55ab970 100644
--- a/src/app/manga/components/inputContainer.jsx
+++ b/src/app/manga/components/inputContainer.jsx
@@ -103,7 +103,7 @@ const MangaSearchBox = () => {
 						setMangaSearchedTitle(event.target.value);
 					}}
 					onKeyDown={async (event) => {
-						if (event.key !== "Control") {
+						if (event.key === "Enter" || event.code === "Enter") {
 							await GetResults();
 						}
 					}}