From 1a85c2571690ba592ac5183d5eadaf9846fe532b Mon Sep 17 00:00:00 2001
From: Factiven <factiven.org@gmail.com>
Date: Mon, 25 Sep 2023 00:44:40 +0700
Subject: Update v4.1.0 (#79)

* Update v4.1.0

* Update pages/_app.js
---
 components/anime/mobile/topSection.js | 179 +---------------------------------
 1 file changed, 3 insertions(+), 176 deletions(-)

(limited to 'components/anime/mobile/topSection.js')

diff --git a/components/anime/mobile/topSection.js b/components/anime/mobile/topSection.js
index 4420d24..8db1465 100644
--- a/components/anime/mobile/topSection.js
+++ b/components/anime/mobile/topSection.js
@@ -1,188 +1,15 @@
-import {
-  ArrowUpCircleIcon,
-  MagnifyingGlassIcon,
-} from "@heroicons/react/24/solid";
-
-import {
-  ArrowLeftIcon,
-  PlayIcon,
-  PlusIcon,
-  ShareIcon,
-  UserIcon,
-} from "@heroicons/react/24/solid";
+import { PlayIcon, PlusIcon, ShareIcon } from "@heroicons/react/24/solid";
 import Image from "next/image";
 import { useRouter } from "next/router";
-import { useSearch } from "../../../lib/hooks/isOpenState";
 import { useEffect, useState } from "react";
 import { convertSecondsToTime } from "../../../utils/getTimes";
 import Link from "next/link";
-import { signIn } from "next-auth/react";
 import InfoChip from "./reused/infoChip";
 import Description from "./reused/description";
-
-const getScrollPosition = (el = window) => ({
-  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
-  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop,
-});
-
-export function NewNavbar({ info, session, scrollP = 200, toTop = false }) {
-  const router = useRouter();
-  const [scrollPosition, setScrollPosition] = useState();
-  const { isOpen, setIsOpen } = useSearch();
-
-  useEffect(() => {
-    const handleScroll = () => {
-      setScrollPosition(getScrollPosition());
-    };
-
-    // Add a scroll event listener when the component mounts
-    window.addEventListener("scroll", handleScroll);
-
-    // Clean up the event listener when the component unmounts
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  }, []);
-  return (
-    <>
-      <nav
-        className={`fixed z-[200] top-0 py-3 px-5 w-full ${
-          scrollPosition?.y >= scrollP
-            ? "bg-tersier shadow-tersier shadow-sm"
-            : ""
-        } transition-all duration-200 ease-linear`}
-      >
-        <div className="flex items-center justify-between max-w-screen-2xl mx-auto">
-          <div className="flex w-full items-center gap-4">
-            {info ? (
-              <>
-                <button
-                  type="button"
-                  className="flex-center w-7 h-7 text-white"
-                  onClick={() => {
-                    // router.back();
-                    router.push("/en");
-                  }}
-                >
-                  <ArrowLeftIcon className="w-full h-full" />
-                </button>
-                <span
-                  className={`font-inter font-semibold w-[50%] line-clamp-1 select-none ${
-                    scrollPosition?.y >= scrollP + 80
-                      ? "opacity-100"
-                      : "opacity-0"
-                  } transition-all duration-200 ease-linear`}
-                >
-                  {info.title.romaji}
-                </span>
-              </>
-            ) : (
-              // <></>
-              <Link
-                href={"/en"}
-                className="flex-center text-white font-outfit text-2xl font-semibold"
-              >
-                moopa
-              </Link>
-            )}
-          </div>
-          <div className="flex items-center gap-4">
-            <button
-              type="button"
-              onClick={() => setIsOpen(true)}
-              className="flex-center w-[26px] h-[26px]"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="32"
-                height="32"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M15 15l6 6m-11-4a7 7 0 110-14 7 7 0 010 14z"
-                ></path>
-              </svg>
-            </button>
-            {/* <div
-                className="bg-white"
-                // title={sessions ? "Go to Profile" : "Login With AniList"}
-              > */}
-            {session ? (
-              <div className="w-7 h-7 relative flex flex-col items-center group">
-                <button
-                  type="button"
-                  onClick={() =>
-                    router.push(`/en/profile/${session?.user.name}`)
-                  }
-                  className="rounded-full bg-white/30 overflow-hidden"
-                >
-                  <Image
-                    src={session?.user.image.large}
-                    alt="avatar"
-                    width={50}
-                    height={50}
-                    className="w-full h-full object-cover"
-                  />
-                </button>
-                <div className="hidden absolute z-50 w-28 text-center -bottom-20 text-white shadow-2xl opacity-0 bg-secondary p-1 py-2 rounded-md font-karla font-light invisible group-hover:visible group-hover:opacity-100 duration-300 transition-all md:grid place-items-center gap-1">
-                  <Link
-                    href={`/en/profile/${session?.user.name}`}
-                    className="hover:text-action"
-                  >
-                    Profile
-                  </Link>
-                  <div
-                    onClick={() => signOut("AniListProvider")}
-                    className="hover:text-action"
-                  >
-                    Log out
-                  </div>
-                </div>
-              </div>
-            ) : (
-              <button
-                type="button"
-                onClick={() => signIn("AniListProvider")}
-                title="Login With AniList"
-                className="w-7 h-7 bg-white/30 rounded-full overflow-hidden"
-              >
-                <UserIcon className="w-full h-full translate-y-2" />
-              </button>
-            )}
-            {/* </div> */}
-          </div>
-        </div>
-      </nav>
-      {toTop && (
-        <button
-          type="button"
-          onClick={() => {
-            window.scrollTo({
-              top: 0,
-              behavior: "smooth",
-            });
-          }}
-          className={`${
-            scrollPosition?.y >= 180
-              ? "-translate-x-6 opacity-100"
-              : "translate-x-[100%] opacity-0"
-          } transform transition-all duration-300 ease-in-out fixed bottom-24 lg:bottom-14 right-0 z-[500]`}
-        >
-          <ArrowUpCircleIcon className="w-10 h-10 text-white" />
-        </button>
-      )}
-    </>
-  );
-}
+import { NewNavbar } from "@/components/shared/NavBar";
 
 export default function DetailTop({
   info,
-  session,
   statuses,
   handleOpen,
   watchUrl,
@@ -217,7 +44,7 @@ export default function DetailTop({
 
   return (
     <div className="gap-6 w-full px-3 pt-4 md:pt-10 flex flex-col items-center justify-center">
-      <NewNavbar info={info} session={session} />
+      <NewNavbar info={info} />
 
       {/* MAIN */}
       <div className="flex flex-col md:flex-row w-full items-center md:items-end gap-5 pt-12">
-- 
cgit v1.2.3