Update pre - v3.5.4

> UI adjustment on smaller devices

5 files changed, 21 insertions, 140 deletions

diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js
index 26c42cb..4b759b6 100644
--- a/pages/anime/[...id].js
+++ b/pages/anime/[...id].js
@@ -447,21 +447,25 @@ export default function Info() {
                     </div>
                   )}
                 </div>
-                <div className="bg-secondary rounded-sm h-[30px]">
-                  <div className="flex items-center justify-center h-full gap-10 p-2">
+                <div className="bg-secondary rounded-sm xs:h-[30px]">
+                  <div className="grid grid-cols-3 place-content-center xs:flex  items-center justify-center h-full xs:gap-10 p-2 text-sm">
                     {info && info.status !== "NOT_YET_RELEASED" ? (
                       <>
-                        <div className="flex-center gap-2">
+                        <div className="flex-center flex-col xs:flex-row gap-2">
                           <TvIcon className="w-5 h-5 text-action" />
                           <h4 className="font-karla">{info?.type}</h4>
                         </div>
-                        <div className="flex-center gap-2">
+                        <div className="flex-center flex-col xs:flex-row gap-2">
                           <ArrowTrendingUpIcon className="w-5 h-5 text-action" />
                           <h4>{info?.averageScore}%</h4>
                         </div>
-                        <div className="flex-center gap-2">
+                        <div className="flex-center flex-col xs:flex-row gap-2">
                           <RectangleStackIcon className="w-5 h-5 text-action" />
-                          <h1>{info?.episodes} Episodes</h1>
+                          {info?.episodes ? (
+                            <h1>{info?.episodes} Episodes</h1>
+                          ) : (
+                            <h1>TBA</h1>
+                          )}
                         </div>
                       </>
                     ) : (
@@ -676,8 +680,8 @@ export default function Info() {
                   )}
                   {info?.nextAiringEpisode && (
                     <div className="flex items-center gap-2">
-                      <div className="flex items-center gap-4">
-                        <h1>Next Ep :</h1>
+                      <div className="flex items-center gap-4 text-[10px] xxs:text-sm md:text-base">
+                        <h1>Next :</h1>
                         <div
                           className="px-5 rounded-sm font-karla font-bold bg-white text-black"
                           // style={color}
@@ -741,7 +745,7 @@ export default function Info() {
                         <div className="flex flex-col">
                           <h1>{epiStatus} while retrieving data</h1>
                           <pre
-                            className={`rounded-md overflow-hidden ${getLanguageClassName(
+                            className={`rounded-md ${getLanguageClassName(
                               "bash"
                             )}`}
                           >
diff --git a/pages/anime/watch/[...info].js b/pages/anime/watch/[...info].js
index 682e252..41635b8 100644
--- a/pages/anime/watch/[...info].js
+++ b/pages/anime/watch/[...info].js
@@ -288,7 +288,7 @@ export default function Info({ sessions, id, aniId, provider }) {
           <div className="min-h-screen mt-3 md:mt-0 flex flex-col lg:gap-0 gap-5 lg:flex-row lg:py-10 lg:px-10 justify-start w-screen">
             <div className="w-screen lg:w-[67%]">
               {loading ? (
-                <div className="h-auto aspect-video z-20">
+                <div className="aspect-video z-20">
                   <VideoPlayer
                     key={id}
                     data={epiData}
@@ -304,7 +304,7 @@ export default function Info({ sessions, id, aniId, provider }) {
                   />
                 </div>
               ) : (
-                <div className="lg:h-[693px] h-[225px] xs:h-[281px] bg-black" />
+                <div className="aspect-video bg-black" />
               )}
               <div>
                 {data ? (
@@ -386,7 +386,7 @@ export default function Info({ sessions, id, aniId, provider }) {
                       <div className="row-start-2">
                         {data ? data.studios : <Skeleton width={80} />}
                       </div>
-                      <div className="grid col-start-2 place-content-end relative">
+                      <div className="hidden xxs:grid col-start-2 place-content-end relative">
                         <div className="" onClick={() => setOpen(true)}>
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
diff --git a/pages/categories/[id].js b/pages/categories/[id].js
deleted file mode 100644
index 1395a33..0000000
--- a/pages/categories/[id].js
+++ /dev/null
@@ -1,125 +0,0 @@
-import Head from "next/head";
-import Footer from "../../components/footer";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import { useAniList } from "../../lib/useAnilist";
-import Image from "next/image";
-
-export default function Categories() {
-  const router = useRouter();
-  const { id } = router.query;
-  const tags = id?.replace(/-/g, " ");
-  const { aniAdvanceSearch } = useAniList();
-
-  const [data, setData] = useState();
-
-  const [season, setSeason] = useState("");
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    setLoading(true);
-    if (tags === "This Season") {
-      seasonNow();
-      setLoading(false);
-    } else if (tags === "Popular Anime") {
-      PopularAnime();
-      setLoading(false);
-    } else if (tags === "Popular Manga") {
-      PopularManga();
-      setLoading(false);
-    } else {
-      setData(null);
-      setLoading(false);
-    }
-  }, [id]);
-
-  async function seasonNow() {
-    const data = await aniAdvanceSearch({
-      perPage: 25,
-      seasonYear: 2023,
-      season: getCurrentSeason(),
-      // type: "MANGA",
-    });
-    setData(data);
-  }
-
-  async function PopularAnime() {
-    const data = await aniAdvanceSearch({
-      perPage: 25,
-      sort: ["POPULARITY_DESC"],
-    });
-    setData(data);
-  }
-
-  async function PopularManga() {
-    const data = await aniAdvanceSearch({
-      perPage: 25,
-      sort: ["POPULARITY_DESC"],
-      type: "MANGA",
-    });
-    setData(data);
-  }
-
-  console.log(data);
-  return (
-    <>
-      <Head>
-        <title>Categories - {tags}</title>
-      </Head>
-      <div className="flex-center min-h-screen w-screen">
-        <div className="grid-container bg-white">
-          {loading ? (
-            <p>Loading...</p>
-          ) : (
-            data &&
-            data?.media.map((m) => {
-              return (
-                <div key={m.id} className="grid-item h-[265px] w-[185px]">
-                  <Image
-                    src={m.coverImage.extraLarge}
-                    alt="image"
-                    width={500}
-                    height={500}
-                    className="object-cover h-[265px] w-[185px]"
-                  />
-                </div>
-              );
-            })
-          )}
-        </div>
-      </div>
-      <Footer />
-    </>
-  );
-}
-
-function getYear() {
-  const now = new Date();
-  return now.getFullYear();
-}
-
-function getCurrentSeason() {
-  const now = new Date();
-  const month = now.getMonth() + 1; // getMonth() returns 0-based index
-
-  switch (month) {
-    case 12:
-    case 1:
-    case 2:
-      return "WINTER";
-    case 3:
-    case 4:
-    case 5:
-      return "SPRING";
-    case 6:
-    case 7:
-    case 8:
-      return "SUMMER";
-    case 9:
-    case 10:
-    case 11:
-      return "FALL";
-    default:
-      return "UNKNOWN SEASON";
-  }
-}
diff --git a/pages/contact.js b/pages/contact.js
index 7dbc6d1..c7da878 100644
--- a/pages/contact.js
+++ b/pages/contact.js
@@ -7,7 +7,9 @@ const Contact = () => {
         <h1>Contact Us</h1>
         <p>If you have any questions or comments, please email us at:</p>
         <p>
-          <a href="mailto:[email protected]">[email protected]</a>
+          <a href="mailto:[email protected]?subject=[Moopa]%20-%20Your%20Subject">
+            [email protected]
+          </a>
         </p>
       </div>
     </Layout>
diff --git a/pages/index.js b/pages/index.js
index 6295dee..fcf8288 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -86,9 +86,9 @@ export function Navigasi() {
                 placeholder="Search Anime"
                 onKeyDown={handleKeyDown}
               />
-              <a href="#" className="search-btn">
+              <div className="search-btn">
                 <i className="fas fa-search"></i>
-              </a>
+              </div>
             </div>
           </div>
         </div>