Feat/export to local file

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>

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>
+  );
+}

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

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";