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)

3 files changed, 375 insertions, 0 deletions

diff --git a/components/manga/mobile/bottomBar.js b/components/manga/mobile/bottomBar.js
new file mode 100644
index 0000000..a388f17
--- /dev/null
+++ b/components/manga/mobile/bottomBar.js
@@ -0,0 +1,125 @@
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  RectangleStackIcon,
+} from "@heroicons/react/24/outline";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import { useState } from "react";
+
+export default function BottomBar({
+  id,
+  prevChapter,
+  nextChapter,
+  currentPage,
+  chapter,
+  page,
+  setSeekPage,
+  setIsOpen,
+}) {
+  const [openPage, setOpenPage] = useState(false);
+  const router = useRouter();
+  return (
+    <div
+      className={`fixed lg:hidden flex flex-col gap-3 z-50 h-auto w-screen ${
+        openPage ? "bottom-0" : "bottom-5"
+      }`}
+    >
+      <div className="flex justify-between px-2">
+        <div className="flex gap-2">
+          <button
+            type="button"
+            className={`flex-center shadow-lg ring-1 ring-black ring-opacity-5 rounded-md p-2 ${
+              prevChapter
+                ? "bg-secondary"
+                : "pointer-events-none bg-[#18181A] text-[#424245]"
+            }`}
+            onClick={() =>
+              router.push(
+                `/en/manga/read/${
+                  chapter.providerId
+                }?id=${id}&chapterId=${encodeURIComponent(prevChapter)}`
+              )
+            }
+          >
+            <ChevronLeftIcon className="w-5 h-5" />
+          </button>
+          <button
+            type="button"
+            className={`flex-center shadow-lg ring-1 ring-black ring-opacity-5 rounded-md p-2 ${
+              nextChapter
+                ? "bg-secondary"
+                : "pointer-events-none bg-[#18181A] text-[#424245]"
+            }`}
+            onClick={() =>
+              router.push(
+                `/en/manga/read/${
+                  chapter.providerId
+                }?id=${id}&chapterId=${encodeURIComponent(nextChapter)}`
+              )
+            }
+          >
+            <ChevronRightIcon className="w-5 h-5" />
+          </button>
+          <button
+            type="button"
+            className={`flex-center gap-2 shadow-lg ring-1 ring-black ring-opacity-5 rounded-md p-2 bg-secondary`}
+            onClick={() => setOpenPage(!openPage)}
+          >
+            <ChevronUpIcon
+              className={`w-5 h-5 transition-transform ${
+                openPage ? "rotate-180 transform" : ""
+              }`}
+            />
+            <h1>Pages</h1>
+          </button>
+          <button
+            type="button"
+            className={`flex-center gap-2 shadow-lg ring-1 ring-black ring-opacity-5 rounded-md p-2 bg-secondary`}
+            onClick={() => setIsOpen(true)}
+          >
+            <RectangleStackIcon className="w-5 h-5" />
+          </button>
+        </div>
+        <span className="flex bg-secondary shadow-lg ring-1 ring-black ring-opacity-5 p-2 rounded-md">{`${currentPage}/${page.length}`}</span>
+      </div>
+      {openPage && (
+        <div className="bg-secondary flex justify-center h-full w-screen py-2">
+          <div className="flex overflow-scroll">
+            {Array.isArray(page) ? (
+              page.map((x) => {
+                return (
+                  <div
+                    key={x.url}
+                    className="hover:bg-[#424245] shrink-0 cursor-pointer rounded-sm"
+                  >
+                    <div
+                      className="flex flex-col shrink-0 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>not found</div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/manga/mobile/hamburgerMenu.js b/components/manga/mobile/hamburgerMenu.js
new file mode 100644
index 0000000..fcdbcce
--- /dev/null
+++ b/components/manga/mobile/hamburgerMenu.js
@@ -0,0 +1,228 @@
+import React, { useState, useEffect } from "react";
+import Link from "next/link";
+import { useSession, signIn, signOut } from "next-auth/react";
+import Image from "next/image";
+import { parseCookies } from "nookies";
+
+export default function HamburgerMenu() {
+  const { data: session } = useSession();
+  const [isVisible, setIsVisible] = useState(false);
+  const [fade, setFade] = useState(false);
+
+  const [lang, setLang] = useState("en");
+  const [cookie, setCookies] = useState(null);
+
+  const handleShowClick = () => {
+    setIsVisible(true);
+    setFade(true);
+  };
+
+  const handleHideClick = () => {
+    setIsVisible(false);
+    setFade(false);
+  };
+
+  useEffect(() => {
+    let lang = null;
+    if (!cookie) {
+      const cookie = parseCookies();
+      lang = cookie.lang || null;
+      setCookies(cookie);
+    }
+    if (lang === "en" || lang === null) {
+      setLang("en");
+    } else if (lang === "id") {
+      setLang("id");
+    }
+  }, []);
+  return (
+    <>
+      {!isVisible && (
+        <button
+          onClick={handleShowClick}
+          className="fixed bottom-[30px] right-[20px] z-[100] flex h-[51px] w-[50px] cursor-pointer items-center justify-center rounded-[8px] bg-[#17171f] shadow-lg lg:hidden"
+          id="bars"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-[42px] w-[61.5px] text-[#8BA0B2] fill-orange-500"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </button>
+      )}
+
+      {/* Mobile Menu */}
+      <div
+        className={`transition-all duration-150 ${
+          fade ? "opacity-100" : "opacity-0"
+        } z-50`}
+      >
+        {isVisible && session && (
+          <Link
+            href={`/${lang}/profile/${session?.user?.name}`}
+            className="fixed lg:hidden bottom-[100px] w-[60px] h-[60px] flex items-center justify-center right-[20px] rounded-full z-50 bg-[#17171f]"
+          >
+            <Image
+              src={session?.user.image.large}
+              alt="user avatar"
+              height={500}
+              width={500}
+              className="object-cover w-[60px] h-[60px] rounded-full"
+            />
+          </Link>
+        )}
+        {isVisible && (
+          <div className="fixed bottom-[30px] right-[20px] z-50 flex h-[51px] w-[300px] items-center justify-center gap-8 rounded-[8px] text-[11px] bg-[#17171f] shadow-lg lg:hidden">
+            <div className="grid grid-cols-4 place-items-center gap-6">
+              <button className="group flex flex-col items-center">
+                <Link href={`/${lang}/`} className="">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    strokeWidth={1.5}
+                    stroke="currentColor"
+                    className="w-6 h-6 group-hover:stroke-action"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+                    />
+                  </svg>
+                </Link>
+                <Link
+                  href={`/${lang}/`}
+                  className="font-karla font-bold text-[#8BA0B2] group-hover:text-action"
+                >
+                  home
+                </Link>
+              </button>
+              <button className="group flex flex-col items-center">
+                <Link href={`/${lang}/about`}>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    strokeWidth={1.5}
+                    stroke="currentColor"
+                    className="w-6 h-6 group-hover:stroke-action"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+                    />
+                  </svg>
+                </Link>
+                <Link
+                  href={`/${lang}/about`}
+                  className="font-karla font-bold text-[#8BA0B2] group-hover:text-action"
+                >
+                  about
+                </Link>
+              </button>
+              <button className="group flex gap-[1.5px] flex-col items-center ">
+                <div>
+                  <Link href={`/${lang}/search/anime`}>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      strokeWidth={1.5}
+                      stroke="currentColor"
+                      className="w-6 h-6 group-hover:stroke-action"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+                      />
+                    </svg>
+                  </Link>
+                </div>
+                <Link
+                  href={`/${lang}/search/anime`}
+                  className="font-karla font-bold text-[#8BA0B2] group-hover:text-action"
+                >
+                  search
+                </Link>
+              </button>
+              {session ? (
+                <button
+                  onClick={() => signOut("AniListProvider")}
+                  className="group flex gap-[1.5px] flex-col items-center "
+                >
+                  <div>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 96 960 960"
+                      className="group-hover:fill-action w-6 h-6 fill-txt"
+                    >
+                      <path d="M186.666 936q-27 0-46.833-19.833T120 869.334V282.666q0-27 19.833-46.833T186.666 216H474v66.666H186.666v586.668H474V936H186.666zm470.668-176.667l-47-48 102-102H370v-66.666h341.001l-102-102 46.999-48 184 184-182.666 182.666z"></path>
+                    </svg>
+                  </div>
+                  <h1 className="font-karla font-bold text-[#8BA0B2] group-hover:text-action">
+                    logout
+                  </h1>
+                </button>
+              ) : (
+                <button
+                  onClick={() => signIn("AniListProvider")}
+                  className="group flex gap-[1.5px] flex-col items-center "
+                >
+                  <div>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 96 960 960"
+                      className="group-hover:fill-action w-6 h-6 fill-txt mr-2"
+                    >
+                      <path d="M486 936v-66.666h287.334V282.666H486V216h287.334q27 0 46.833 19.833T840 282.666v586.668q0 27-19.833 46.833T773.334 936H486zm-78.666-176.667l-47-48 102-102H120v-66.666h341l-102-102 47-48 184 184-182.666 182.666z"></path>
+                    </svg>
+                  </div>
+                  <h1 className="font-karla font-bold text-[#8BA0B2] group-hover:text-action">
+                    login
+                  </h1>
+                </button>
+              )}
+            </div>
+            <button onClick={handleHideClick}>
+              <svg
+                width="20"
+                height="21"
+                className="fill-orange-500"
+                viewBox="0 0 20 21"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect
+                  x="2.44043"
+                  y="0.941467"
+                  width="23.5842"
+                  height="3.45134"
+                  rx="1.72567"
+                  transform="rotate(45 2.44043 0.941467)"
+                />
+                <rect
+                  x="19.1172"
+                  y="3.38196"
+                  width="23.5842"
+                  height="3.45134"
+                  rx="1.72567"
+                  transform="rotate(135 19.1172 3.38196)"
+                />
+              </svg>
+            </button>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/components/manga/mobile/topBar.js b/components/manga/mobile/topBar.js
new file mode 100644
index 0000000..7290e05
--- /dev/null
+++ b/components/manga/mobile/topBar.js
@@ -0,0 +1,22 @@
+import { ArrowLeftIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+
+export default function TopBar({ info }) {
+  return (
+    <div className="fixed lg:hidden flex items-center justify-between px-3 z-50 top-0 h-[5vh] w-screen p-2 bg-secondary">
+      {info && (
+        <>
+          <Link
+            href={`/en/manga/${info.id}`}
+            className="flex gap-2 items-center"
+          >
+            <ArrowLeftIcon className="w-6 h-6" />
+            <h1>back</h1>
+          </Link>
+          {/* <h1 className="font-outfit text-action font-bold text-lg">moopa</h1> */}
+          <h1 className="w-[50%] line-clamp-1 text-end">{info.title.romaji}</h1>
+        </>
+      )}
+    </div>
+  );
+}