From 50a0f0240d7fef133eb5acc1bea2b1168b08e9db Mon Sep 17 00:00:00 2001
From: Factiven <factiven.org@gmail.com>
Date: Sun, 24 Dec 2023 13:03:54 +0700
Subject: migrate to typescript

---
 components/anime/mobile/topSection.js | 323 ----------------------------------
 1 file changed, 323 deletions(-)
 delete mode 100644 components/anime/mobile/topSection.js

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

diff --git a/components/anime/mobile/topSection.js b/components/anime/mobile/topSection.js
deleted file mode 100644
index 6780da5..0000000
--- a/components/anime/mobile/topSection.js
+++ /dev/null
@@ -1,323 +0,0 @@
-import {
-  BookOpenIcon,
-  PlayIcon,
-  PlusIcon,
-  ShareIcon,
-} from "@heroicons/react/24/solid";
-import Image from "next/image";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import { convertSecondsToTime } from "@/utils/getTimes";
-import Link from "next/link";
-import InfoChip from "./reused/infoChip";
-import Description from "./reused/description";
-import { NewNavbar } from "@/components/shared/NavBar";
-
-export default function DetailTop({
-  info,
-  statuses,
-  handleOpen,
-  watchUrl,
-  progress,
-  color,
-}) {
-  const router = useRouter();
-  const [readMore, setReadMore] = useState(false);
-
-  const [showAll, setShowAll] = useState(false);
-
-  const isAnime = info.type === "ANIME";
-
-  useEffect(() => {
-    setReadMore(false);
-  }, [info.id]);
-
-  const handleShareClick = async () => {
-    try {
-      if (navigator.share) {
-        await navigator.share({
-          title: `${isAnime ? "Watch" : "Read"} Now - ${info?.title?.english}`,
-          // text: `Watch [${info?.title?.romaji}] and more on Moopa. Join us for endless anime entertainment"`,
-          url: window.location.href,
-        });
-      } else {
-        // Web Share API is not supported, provide a fallback or show a message
-        alert("Web Share API is not supported in this browser.");
-      }
-    } catch (error) {
-      console.error("Error sharing:", error);
-    }
-  };
-
-  return (
-    <div className="gap-6 w-full px-3 pt-4 md:pt-10 flex flex-col items-center justify-center">
-      <NewNavbar info={info} />
-
-      {/* MAIN */}
-      <div className="flex flex-col md:flex-row w-full items-center md:items-end gap-5 pt-12">
-        <div className="shrink-0 w-[180px] h-[250px] rounded overflow-hidden">
-          <img
-            src={info?.coverImage?.extraLarge || info?.coverImage}
-            alt="poster anime"
-            width={300}
-            height={300}
-            className="w-full h-full object-cover"
-          />
-        </div>
-        <div className="flex flex-col gap-4 items-center md:items-start justify-end w-full">
-          <div className="flex flex-col gap-1 text-center md:text-start">
-            <h3 className="font-karla text-lg capitalize leading-none">
-              {info?.season?.toLowerCase() || getMonth(info?.startDate?.month)}{" "}
-              {info.seasonYear || info?.startDate?.year}
-            </h3>
-            <h1 className="font-outfit font-extrabold text-2xl md:text-4xl line-clamp-2 text-white">
-              {info?.title?.romaji || info?.title?.english}
-            </h1>
-            <h2 className="font-karla line-clamp-1 text-sm md:text-lg md:pb-2 font-light text-white/70">
-              {info.title?.english}
-            </h2>
-            <InfoChip info={info} color={color} className="hidden md:flex" />
-            {info?.description && (
-              <Description
-                info={info}
-                readMore={readMore}
-                setReadMore={setReadMore}
-                className="md:block hidden"
-              />
-            )}
-          </div>
-        </div>
-      </div>
-
-      <div className="hidden md:flex gap-5 items-center justify-start w-full">
-        <button
-          type="button"
-          onClick={() => router.push(watchUrl)}
-          className={`${
-            !watchUrl ? "opacity-30 pointer-events-none" : ""
-          } w-[180px] flex-center text-lg font-karla font-semibold gap-2 border-black border-opacity-10 text-black rounded-full py-1 px-4 bg-white hover:opacity-80`}
-        >
-          {isAnime ? (
-            <PlayIcon className="w-5 h-5" />
-          ) : (
-            <BookOpenIcon className="w-5 h-5" />
-          )}
-          {progress > 0 ? (
-            statuses?.value === "COMPLETED" ? (
-              isAnime ? (
-                "Rewatch"
-              ) : (
-                "Reread"
-              )
-            ) : !watchUrl && info?.nextAiringEpisode ? (
-              <span>
-                {convertSecondsToTime(info.nextAiringEpisode.timeUntilAiring)}{" "}
-              </span>
-            ) : (
-              "Continue"
-            )
-          ) : isAnime ? (
-            "Watch Now"
-          ) : (
-            "Read Now"
-          )}
-        </button>
-        <div className="flex gap-2">
-          <button
-            type="button"
-            className="flex-center group relative w-10 h-10 bg-secondary rounded-full"
-            onClick={() => handleOpen()}
-          >
-            <span className="absolute pointer-events-none z-40 opacity-0 -translate-y-8 group-hover:-translate-y-10 group-hover:opacity-100 font-karla shadow-tersier shadow-md whitespace-nowrap bg-secondary px-2 py-1 rounded transition-all duration-200 ease-out">
-              Add to List
-            </span>
-            <PlusIcon className="w-5 h-5" />
-          </button>
-          <button
-            type="button"
-            className="flex-center group relative w-10 h-10 bg-secondary rounded-full"
-            onClick={handleShareClick}
-          >
-            <span className="absolute pointer-events-none z-40 opacity-0 -translate-y-8 group-hover:-translate-y-10 group-hover:opacity-100 font-karla shadow-tersier shadow-md whitespace-nowrap bg-secondary px-2 py-1 rounded transition-all duration-200 ease-out">
-              Share {isAnime ? "Anime" : "Manga"}
-            </span>
-            <ShareIcon className="w-5 h-5" />
-          </button>
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href={`https://anilist.co/${info.type.toLowerCase()}/${info.id}`}
-            className="flex-center group relative w-10 h-10 bg-secondary rounded-full"
-          >
-            <span className="absolute pointer-events-none z-40 opacity-0 -translate-y-8 group-hover:-translate-y-10 group-hover:opacity-100 font-karla shadow-tersier shadow-md whitespace-nowrap bg-secondary px-2 py-1 rounded transition-all duration-200 ease-out">
-              See on AniList
-            </span>
-            <Image
-              src="/svg/anilist-icon.svg"
-              alt="anilist_icon"
-              width={20}
-              height={20}
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="md:hidden flex gap-2 items-center justify-center w-[90%]">
-        <button
-          type="button"
-          className="flex-center group relative w-10 h-10 bg-secondary rounded-full"
-          onClick={() => handleOpen()}
-        >
-          <span className="absolute pointer-events-none z-40 opacity-0 -translate-y-8 group-hover:-translate-y-10 group-hover:opacity-100 font-karla shadow-tersier shadow-md whitespace-nowrap bg-secondary px-2 py-1 rounded transition-all duration-200 ease-out">
-            Add to List
-          </span>
-          <PlusIcon className="w-5 h-5" />
-        </button>
-        <button
-          type="button"
-          onClick={() => router.push(watchUrl)}
-          className={`${
-            !watchUrl ? "opacity-30 pointer-events-none" : ""
-          } flex items-center text-lg font-karla font-semibold gap-1 border-black border-opacity-10 text-black rounded-full py-2 px-4 bg-white`}
-        >
-          {isAnime ? (
-            <PlayIcon className="w-5 h-5" />
-          ) : (
-            <BookOpenIcon className="w-5 h-5" />
-          )}
-          {progress > 0 ? (
-            statuses?.value === "COMPLETED" ? (
-              isAnime ? (
-                "Rewatch"
-              ) : (
-                "Reread"
-              )
-            ) : !watchUrl && info?.nextAiringEpisode ? (
-              <span>
-                {convertSecondsToTime(info.nextAiringEpisode.timeUntilAiring)}{" "}
-              </span>
-            ) : (
-              "Continue"
-            )
-          ) : isAnime ? (
-            "Watch Now"
-          ) : (
-            "Read Now"
-          )}
-        </button>
-        <button
-          type="button"
-          className="flex-center group relative w-10 h-10 bg-secondary rounded-full"
-          onClick={handleShareClick}
-        >
-          <span className="absolute pointer-events-none z-40 opacity-0 -translate-y-8 group-hover:-translate-y-10 group-hover:opacity-100 font-karla shadow-tersier shadow-md whitespace-nowrap bg-secondary px-2 py-1 rounded transition-all duration-200 ease-out">
-            Share {isAnime ? "Anime" : "Manga"}
-          </span>
-          <ShareIcon className="w-5 h-5" />
-        </button>
-      </div>
-
-      {info.nextAiringEpisode?.timeUntilAiring && (
-        <p className="md:hidden">
-          Episode {info.nextAiringEpisode.episode} in{" "}
-          <span className="font-bold">
-            {convertSecondsToTime(info.nextAiringEpisode.timeUntilAiring)}{" "}
-          </span>
-        </p>
-      )}
-
-      {info?.description && (
-        <Description
-          info={info}
-          readMore={readMore}
-          setReadMore={setReadMore}
-          className="md:hidden"
-        />
-      )}
-
-      <InfoChip
-        info={info}
-        color={color}
-        className={`${readMore ? "flex" : "hidden"} md:hidden`}
-      />
-
-      {info?.relations?.edges?.length > 0 && (
-        <div className="w-screen md:w-full">
-          <div className="flex justify-between items-center p-3 md:p-0">
-            {info?.relations?.edges?.length > 0 && (
-              <div className="text-[20px] md:text-2xl font-bold font-karla">
-                Relations
-              </div>
-            )}
-            {info?.relations?.edges?.length > 3 && (
-              <div
-                className="cursor-pointer font-karla"
-                onClick={() => setShowAll(!showAll)}
-              >
-                {showAll ? "show less" : "show more"}
-              </div>
-            )}
-          </div>
-          <div
-            className={` md:w-full flex gap-5 overflow-x-scroll snap-x scroll-px-5 scrollbar-none md:grid md:grid-cols-3 justify-items-center md:pt-7 md:pb-5 px-3 md:px-4 pt-4 rounded-xl`}
-          >
-            {info?.relations?.edges
-              .slice(0, showAll ? info?.relations?.edges.length : 3)
-              .map((r, index) => {
-                const rel = r.node;
-                return (
-                  <Link
-                    key={rel.id}
-                    href={
-                      rel.type === "ANIME" ||
-                      rel.type === "OVA" ||
-                      rel.type === "MOVIE" ||
-                      rel.type === "SPECIAL" ||
-                      rel.type === "ONA"
-                        ? `/en/anime/${rel.id}`
-                        : `/en/manga/${rel.id}`
-                    }
-                    className={`md:hover:scale-[1.02] snap-start hover:shadow-lg scale-100 transition-transform duration-200 ease-out w-full ${
-                      rel.type === "MUSIC" ? "pointer-events-none" : ""
-                    }`}
-                  >
-                    <div
-                      key={rel.id}
-                      className="w-[400px] md:w-full h-[126px] bg-secondary flex rounded-md"
-                    >
-                      <div className="w-[90px] bg-image rounded-l-md shrink-0">
-                        <Image
-                          src={rel.coverImage.extraLarge}
-                          alt={rel.id}
-                          height={500}
-                          width={500}
-                          className="object-cover h-full w-full shrink-0 rounded-l-md"
-                        />
-                      </div>
-                      <div className="h-full grid px-3 items-center">
-                        <div className="text-action font-outfit font-bold capitalize">
-                          {r.relationType.replace(/_/g, " ")}
-                        </div>
-                        <div className="font-outfit line-clamp-2">
-                          {rel.title.userPreferred}
-                        </div>
-                        <div className="font-thin">{rel.format}</div>
-                      </div>
-                    </div>
-                  </Link>
-                );
-              })}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function getMonth(month) {
-  if (!month) return "";
-  const formattedMonth = new Date(0, month).toLocaleString("default", {
-    month: "long",
-  });
-  return formattedMonth;
-}
-- 
cgit v1.2.3