1 files changed, 115 insertions, 0 deletions
diff --git a/pages/id/novel/read/index.tsx b/pages/id/novel/read/index.tsx
new file mode 100644
index 0000000..5f36e54
--- /dev/null
+++ b/pages/id/novel/read/index.tsx
@@ -0,0 +1,115 @@
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import { Navbar } from "@/components/shared/NavBar";
+import MobileNav from "@/components/shared/MobileNav";
+import pls from "@/utils/request/index";
+
+interface IData {
+  novelTitle: string;
+  title: string;
+  navigation: {
+    next: string;
+    prev: string;
+  };
+  content: string;
+}
+
+export async function getServerSideProps() {
+  const API = process.env.ID_API;
+  return {
+    props: {
+      API,
+    },
+  };
+}
+
+export default function ReadNovel({ API }: { API: string }) {
+  const [data, setData] = useState<IData>();
+
+  const searchParams = useSearchParams();
+  const id = searchParams.get("id");
+  const mangaId = id?.split("/")[0];
+
+  useEffect(() => {
+    async function fetchData() {
+      if (id) {
+        const data = await pls.get(`${API}/api/novel/chapter/${id}`);
+        setData(data);
+      }
+    }
+    fetchData();
+
+    return () => {
+      setData(undefined);
+    };
+  }, [id]);
+
+  return (
+    <>
+      <Navbar withNav paddingY="py-2" scrollP={2} />
+      <MobileNav hideProfile />
+      <div className="w-screen flex flex-col items-center">
+        {/* {data && ( */}
+        <div className="flex items-center gap-5 w-full max-w-screen-lg px-5 mt-16 font-karla font-bold">
+          <div className="flex gap-2">
+            <Link
+              href={`/id/novel/read/?id=${data?.navigation?.prev}`}
+              className={`${
+                data?.navigation?.prev ? "" : "pointer-events-none opacity-60"
+              } py-1 px-2 bg-secondary rounded`}
+            >
+              prev
+            </Link>
+            <Link
+              href={`/id/novel/read/?id=${data?.navigation?.next}`}
+              className={`${
+                data?.navigation?.next ? "" : "pointer-events-none opacity-60"
+              } py-1 px-2 bg-secondary rounded`}
+            >
+              next
+            </Link>
+          </div>
+          <span>/</span>
+          <Link href={`/id/novel/${mangaId}`} className="text-lg line-clamp-1">
+            {data?.novelTitle}
+          </Link>
+        </div>
+        {/* )} */}
+        <div className="block mt-5">
+          <div className="px-5 w-full h-full max-w-screen-lg pointer-events-none select-none">
+            <p className="text-xl font-bold my-5">{data?.title}</p>
+            {data?.content && (
+              <p
+                dangerouslySetInnerHTML={{ __html: data?.content }}
+                className="space-y-5"
+              />
+            )}
+          </div>
+        </div>
+        {data?.content && (
+          <div className="px-5 py-10 w-full h-full max-w-screen-lg">
+            <div className="flex w-full gap-2">
+              <Link
+                href={`/id/novel/read/?id=${data?.navigation?.prev}`}
+                className={`${
+                  data?.navigation?.prev ? "" : "pointer-events-none opacity-60"
+                } py-1 px-2 bg-secondary rounded`}
+              >
+                prev
+              </Link>
+              <Link
+                href={`/id/novel/read/?id=${data?.navigation?.next}`}
+                className={`${
+                  data?.navigation?.next ? "" : "pointer-events-none opacity-60"
+                } py-1 px-2 bg-secondary rounded`}
+              >
+                next
+              </Link>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}