From 38b7670aae86b5fb42bf79394da15be0b0bc0b85 Mon Sep 17 00:00:00 2001
From: Truong Minh Phat <tmphat1312@gmail.com>
Date: Sat, 8 Jun 2024 12:16:08 +0700
Subject: [PATCH 1/2] refactor: update ReadingPadSettings to use smaller
 SettingsIcon size

---
 src/app/doc-truyen/_components/reading-pad-settings.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/doc-truyen/_components/reading-pad-settings.tsx b/src/app/doc-truyen/_components/reading-pad-settings.tsx
index 8de368d..f1b0932 100644
--- a/src/app/doc-truyen/_components/reading-pad-settings.tsx
+++ b/src/app/doc-truyen/_components/reading-pad-settings.tsx
@@ -23,7 +23,7 @@ export default function ReadingPadSettings() {
       <Popover.Trigger>
         <div className="flex items-center gap-1">
           <span className="hidden md:inline text-sm">Tùy chỉnh</span>
-          <SettingsIcon className="text-fg-500 size-6 md:size-5" />
+          <SettingsIcon className="text-fg-500 size-5" />
         </div>
       </Popover.Trigger>
       <Popover.Content>

From 787e6f34228d4524d2759c08eab1ae30429d1ede Mon Sep 17 00:00:00 2001
From: Truong Minh Phat <tmphat1312@gmail.com>
Date: Sat, 8 Jun 2024 12:16:23 +0700
Subject: [PATCH 2/2] feat: Add SaveToLocal component for downloading chapters
 (MOCK)

---
 .../doc-truyen/_components/save-to-local.tsx  | 45 +++++++++++++++++++
 src/app/doc-truyen/_layout/content.tsx        |  8 +++-
 src/lib/icons.tsx                             |  3 ++
 3 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 src/app/doc-truyen/_components/save-to-local.tsx

diff --git a/src/app/doc-truyen/_components/save-to-local.tsx b/src/app/doc-truyen/_components/save-to-local.tsx
new file mode 100644
index 0000000..4aa6491
--- /dev/null
+++ b/src/app/doc-truyen/_components/save-to-local.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { API_URL } from "@/lib/constants";
+import { DownloadIcon } from "@/lib/icons";
+import { Popover } from "@/ui/common/popover";
+import Link from "next/link";
+
+const MOCK_OPTIONS = [
+  { label: "pdf", value: "htmlToPdf" },
+  { label: "epub", value: "htmlToEpub" },
+  { label: "images", value: "htmlToImg" },
+];
+
+type SaveToLocalProps = {
+  chapterURL: string;
+};
+
+export default function SaveToLocal({ chapterURL }: SaveToLocalProps) {
+  return (
+    <Popover.Root>
+      <Popover.Trigger>
+        <div className="flex items-center gap-1">
+          <span className="hidden md:inline text-sm">Lưu về máy</span>
+          <DownloadIcon className="text-fg-500 size-5" />
+        </div>
+      </Popover.Trigger>
+      <Popover.Content>
+        <ul className="space-y-2 text-sm">
+          {MOCK_OPTIONS.map((option) => (
+            <li key={option.value}>
+              <Link
+                href={`${API_URL}/${option.value}?url=${chapterURL}`}
+                className="flex items-center gap-1.5"
+                target="_blank"
+              >
+                <DownloadIcon className="text-fg-500 size-4" />
+                <span>{option.label}</span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </Popover.Content>
+    </Popover.Root>
+  );
+}
diff --git a/src/app/doc-truyen/_layout/content.tsx b/src/app/doc-truyen/_layout/content.tsx
index 8a7da46..f642e0d 100644
--- a/src/app/doc-truyen/_layout/content.tsx
+++ b/src/app/doc-truyen/_layout/content.tsx
@@ -4,6 +4,7 @@ import ChangeChapterSource from "../_components/change-chapter-source";
 import ChapterNavigation from "../_components/chapter-navigation";
 import CurrentSource from "../_components/current-source";
 import ReadingPadSettings from "../_components/reading-pad-settings";
+import SaveToLocal from "../_components/save-to-local";
 import SetReadingHistory from "../_components/set-reading-history";
 import SettingsConsumer from "../_components/settings-consumer";
 import StoryContent from "../_components/story-content";
@@ -33,9 +34,12 @@ export default function Content({
         <SettingsConsumer>
           <article className="container">
             <section className="container py-3">
-              <div className="flex justify-between mb-2">
+              <div className="flex justify-between mb-2.5">
                 <CurrentSource />
-                <ReadingPadSettings />
+                <div className="space-x-3.5">
+                  <SaveToLocal chapterURL={chapterDetail.url} />
+                  <ReadingPadSettings />
+                </div>
               </div>
               <h3 className="mb-2 text-center font-medium uppercase text-fg-500 sm:text-lg">
                 <Link
diff --git a/src/lib/icons.tsx b/src/lib/icons.tsx
index 56c13f1..c16150e 100644
--- a/src/lib/icons.tsx
+++ b/src/lib/icons.tsx
@@ -1,3 +1,5 @@
+import { ReactSVGElement } from "react";
+
 export {
   SettingsIcon,
   SearchIcon,
@@ -10,4 +12,5 @@ export {
   XIcon,
   TrashIcon,
   MoveUpIcon,
+  DownloadIcon,
 } from "lucide-react";