Update v3.6.4

- Added Manga page with a working tracker for AniList user
- Added schedule component to home page
- Added disqus comment section so you can fight on each other (not recommended)
- Added /id and /en route for english and indonesian subs (id route still work in progress)

1 files changed, 111 insertions, 0 deletions

diff --git a/components/manga/leftBar.js b/components/manga/leftBar.js
new file mode 100644
index 0000000..272b07a
--- /dev/null
+++ b/components/manga/leftBar.js
@@ -0,0 +1,111 @@
+import { ArrowLeftIcon } from "@heroicons/react/24/solid";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+export function LeftBar({ data, page, info, currentId, setSeekPage }) {
+  const router = useRouter();
+  function goBack() {
+    router.push(`/en/manga/${info.id}`);
+  }
+  // console.log(info);
+  return (
+    <div className="hidden lg:block shrink-0 w-[16rem] h-screen overflow-y-auto scrollbar-none bg-secondary relative group">
+      <div className="grid">
+        <button
+          type="button"
+          onClick={goBack}
+          className="flex items-center p-2 gap-2 line-clamp-1 cursor-pointer"
+        >
+          <ArrowLeftIcon className="w-5 h-5 shrink-0" />
+          <h1 className="line-clamp-1 font-semibold text-start text-sm xl:text-base">
+            {info?.title?.romaji}
+          </h1>
+        </button>
+
+        <div className="flex flex-col p-2 gap-2">
+          <div className="flex font-karla flex-col gap-2">
+            <h1 className="font-bold xl:text-lg">Provider</h1>
+            <div className="w-full px-2">
+              <p className="bg-[#161617] text-sm xl:text-base capitalize rounded-md py-1 px-2">
+                {data.providerId}
+              </p>
+            </div>
+          </div>
+          {/* Chapters */}
+          <div className="flex font-karla flex-col gap-2">
+            <h1 className="font-bold xl:text-lg">Chapters</h1>
+            <div className="px-2">
+              <div className="w-full text-sm xl:text-base px-1 h-[8rem] xl:h-[30vh] bg-[#161617] rounded-md overflow-auto scrollbar-thin scrollbar-thumb-[#363639] scrollbar-thumb-rounded-md hover:scrollbar-thumb-[#424245]">
+                {data?.chapters?.map((x) => {
+                  return (
+                    <div
+                      key={x.id}
+                      className={`${
+                        x.id === currentId && "text-action"
+                      } py-1 px-2 hover:bg-[#424245] rounded-sm`}
+                    >
+                      <Link
+                        href={`/en/manga/read/${data.providerId}?id=${
+                          info.id
+                        }&chapterId=${encodeURIComponent(x.id)}`}
+                        className=""
+                      >
+                        <h1 className="line-clamp-1">
+                          <span className="font-bold">{x.number}.</span>{" "}
+                          {x.title}
+                        </h1>
+                      </Link>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+          {/* pages */}
+          <div className="flex font-karla flex-col gap-2">
+            <h1 className="font-bold xl:text-lg">Pages</h1>
+            <div className="px-2">
+              <div className="text-center w-full px-1 h-[30vh] bg-[#161617] rounded-md overflow-auto scrollbar-thin scrollbar-thumb-[#363639] scrollbar-thumb-rounded-md hover:scrollbar-thumb-[#424245]">
+                {Array.isArray(page) ? (
+                  <div className="grid grid-cols-2 gap-5 py-4 px-2 place-items-center">
+                    {page?.map((x) => {
+                      return (
+                        <div
+                          key={x.url}
+                          className="hover:bg-[#424245] cursor-pointer rounded-sm w-full"
+                        >
+                          <div
+                            className="flex flex-col items-center cursor-pointer"
+                            onClick={() => setSeekPage(x.index)}
+                          >
+                            <Image
+                              src={`https://img.moopa.live/image-proxy?url=${encodeURIComponent(
+                                x.url
+                              )}&headers=${encodeURIComponent(
+                                JSON.stringify({ Referer: x.headers.Referer })
+                              )}`}
+                              alt="chapter image"
+                              width={100}
+                              height={200}
+                              className="w-full h-[120px] object-contain scale-90"
+                            />
+                            <h1>Page {x.index + 1}</h1>
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                ) : (
+                  <div className="py-4">
+                    <p>{page.error || "No Pages."}</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}