aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--components/home/content.js35
-rw-r--r--components/home/mobileNav.js202
-rw-r--r--lib/anilist/aniAdvanceSearch.js1
-rw-r--r--package-lock.json4
-rw-r--r--package.json2
-rw-r--r--pages/_app.js58
-rw-r--r--pages/en/anime/popular.js175
-rw-r--r--pages/en/anime/trending.js175
-rw-r--r--pages/en/index.js199
-rw-r--r--pages/en/profile/[user].js6
-rw-r--r--pages/en/search/[param].js4
11 files changed, 630 insertions, 231 deletions
diff --git a/components/home/content.js b/components/home/content.js
index d67483d..9b2b1a9 100644
--- a/components/home/content.js
+++ b/components/home/content.js
@@ -11,8 +11,11 @@ import { parseCookies } from "nookies";
import { ChevronLeftIcon } from "@heroicons/react/20/solid";
import { ExclamationCircleIcon } from "@heroicons/react/24/solid";
+import { useRouter } from "next/router";
+
+export default function Content({ ids, section, data, og, userName }) {
+ const router = useRouter();
-export default function Content({ ids, section, data, og }) {
const [startX, setStartX] = useState(null);
const containerRef = useRef(null);
const [cookie, setCookie] = useState(null);
@@ -111,9 +114,29 @@ export default function Content({ ids, section, data, og }) {
const slicedData =
filteredData?.length > 15 ? filteredData?.slice(0, 15) : filteredData;
+ const goToPage = () => {
+ if (section === "Trending Now") {
+ router.push(`/${lang}/anime/trending`);
+ }
+ if (section === "Popular Anime") {
+ router.push(`/${lang}/anime/popular`);
+ }
+ if (section === "Your Plan") {
+ router.push(`/${lang}/profile/${userName}/#planning`);
+ }
+ if (section === "On-Going Anime" || section === "Your Watch List") {
+ router.push(`/${lang}/profile/${userName}/#current`);
+ }
+ };
+
return (
<div>
- <div className="flex items-center justify-between lg:justify-normal lg:gap-3 px-5">
+ <div
+ className={`flex items-center justify-between lg:justify-normal lg:gap-3 px-5 ${
+ section === "Recommendations" ? "" : "cursor-pointer"
+ }`}
+ onClick={goToPage}
+ >
<h1 className="font-karla text-[20px] font-bold">{section}</h1>
<ChevronRightIcon className="w-5 h-5" />
</div>
@@ -210,8 +233,12 @@ export default function Content({ ids, section, data, og }) {
);
})}
{filteredData.length >= 10 && section !== "Recommendations" && (
- <div key={section} className="flex ">
- <div className="h-[190px] w-[135px] lg:h-[265px] lg:w-[185px] object-cover rounded-md border-secondary border-2 flex flex-col gap-2 items-center text-center justify-center text-[#6a6a6a]">
+ <div
+ key={section}
+ className="flex cursor-pointer"
+ onClick={goToPage}
+ >
+ <div className="h-[190px] w-[135px] lg:h-[265px] lg:w-[185px] object-cover rounded-md border-secondary border-2 flex flex-col gap-2 items-center text-center justify-center text-[#6a6a6a] hover:text-[#9f9f9f] hover:border-[#757575] transition-colors duration-200">
<h1 className="whitespace-pre-wrap text-sm">
More on {section}
</h1>
diff --git a/components/home/mobileNav.js b/components/home/mobileNav.js
new file mode 100644
index 0000000..52c9d52
--- /dev/null
+++ b/components/home/mobileNav.js
@@ -0,0 +1,202 @@
+import { signIn, signOut } from "next-auth/react";
+import Link from "next/link";
+import { useState } from "react";
+
+export default function MobileNav({ sessions }) {
+ const [isVisible, setIsVisible] = useState(false);
+
+ const handleShowClick = () => {
+ setIsVisible(true);
+ };
+
+ const handleHideClick = () => {
+ setIsVisible(false);
+ };
+ return (
+ <>
+ {/* NAVBAR */}
+ <div className="z-50">
+ {!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>
+ )}
+ </div>
+
+ {/* Mobile Menu */}
+ <div className={`transition-all duration-150 subpixel-antialiased z-50`}>
+ {isVisible && sessions && (
+ <Link
+ href={`/en/profile/${sessions?.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]"
+ >
+ <img
+ src={sessions?.user.image.large}
+ alt="user avatar"
+ 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="/en/">
+ <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="/en/"
+ className="font-karla font-bold text-[#8BA0B2] group-hover:text-action"
+ >
+ home
+ </Link>
+ </button>
+ <button className="group flex flex-col items-center">
+ <Link href="/en/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="/en/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="/en/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="/en/search/anime"
+ className="font-karla font-bold text-[#8BA0B2] group-hover:text-action"
+ >
+ search
+ </Link>
+ </button>
+ {sessions ? (
+ <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/lib/anilist/aniAdvanceSearch.js b/lib/anilist/aniAdvanceSearch.js
index bb22ead..263ca9d 100644
--- a/lib/anilist/aniAdvanceSearch.js
+++ b/lib/anilist/aniAdvanceSearch.js
@@ -14,6 +14,7 @@ const advance = `
}
type
episodes
+ chapters
status
format
season
diff --git a/package-lock.json b/package-lock.json
index dffa733..d9e58cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "moopa",
- "version": "3.6.5",
+ "version": "3.6.6",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "moopa",
- "version": "3.6.5",
+ "version": "3.6.6",
"dependencies": {
"@apollo/client": "^3.7.3",
"@headlessui/react": "^1.7.15",
diff --git a/package.json b/package.json
index d602db9..4ad5c58 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "moopa",
- "version": "3.6.5",
+ "version": "3.6.6",
"private": true,
"founder": "Factiven",
"scripts": {
diff --git a/pages/_app.js b/pages/_app.js
index 6334bd9..0030e0d 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,4 +1,3 @@
-// import { ThemeProvider } from "next-themes";
import { useRouter } from "next/router";
import { AnimatePresence, motion as m } from "framer-motion";
import NextNProgress from "nextjs-progressbar";
@@ -6,6 +5,7 @@ import { SessionProvider } from "next-auth/react";
import "../styles/globals.css";
import "react-toastify/dist/ReactToastify.css";
import "react-loading-skeleton/dist/skeleton.css";
+import { SkeletonTheme } from "react-loading-skeleton";
export default function App({
Component,
@@ -15,36 +15,36 @@ export default function App({
return (
<SessionProvider session={session}>
- {/* <ThemeProvider attribute="class"> */}
<AnimatePresence mode="wait">
- <m.div
- key={`route-${router.route}`}
- transition={{ duration: 0.5 }}
- initial="initialState"
- animate="animateState"
- exit="exitState"
- variants={{
- initialState: {
- opacity: 0,
- },
- animateState: {
- opacity: 1,
- },
- exitState: {},
- }}
- className="z-50 w-screen"
- >
- <NextNProgress
- color="#FF7E2C"
- startPosition={0.3}
- stopDelayMs={200}
- height={3}
- showOnShallow={true}
- />
- <Component {...pageProps} />
- </m.div>
+ <SkeletonTheme baseColor="#232329" highlightColor="#2a2a32">
+ <m.div
+ key={`route-${router.route}`}
+ transition={{ duration: 0.5 }}
+ initial="initialState"
+ animate="animateState"
+ exit="exitState"
+ variants={{
+ initialState: {
+ opacity: 0,
+ },
+ animateState: {
+ opacity: 1,
+ },
+ exitState: {},
+ }}
+ className="z-50 w-screen"
+ >
+ <NextNProgress
+ color="#FF7E2C"
+ startPosition={0.3}
+ stopDelayMs={200}
+ height={3}
+ showOnShallow={true}
+ />
+ <Component {...pageProps} />
+ </m.div>
+ </SkeletonTheme>
</AnimatePresence>
- {/* </ThemeProvider> */}
</SessionProvider>
);
}
diff --git a/pages/en/anime/popular.js b/pages/en/anime/popular.js
new file mode 100644
index 0000000..b8b19ba
--- /dev/null
+++ b/pages/en/anime/popular.js
@@ -0,0 +1,175 @@
+import { ChevronLeftIcon } from "@heroicons/react/24/solid";
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import Skeleton from "react-loading-skeleton";
+import Navbar from "../../../components/navbar";
+import Footer from "../../../components/footer";
+import { getServerSession } from "next-auth";
+import { authOptions } from "../../api/auth/[...nextauth]";
+import MobileNav from "../../../components/home/mobileNav";
+
+export default function PopularAnime({ sessions }) {
+ const [data, setData] = useState(null);
+ const [page, setPage] = useState(1);
+ const [nextPage, setNextPage] = useState(true);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ setLoading(true);
+ const fetchData = async () => {
+ const res = await fetch("https://graphql.anilist.co", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ },
+ body: JSON.stringify({
+ query: `query ($page: Int, $perPage: Int) {
+ Page (page: $page, perPage: $perPage) {
+ pageInfo {
+ total
+ currentPage
+ lastPage
+ hasNextPage
+ perPage
+ }
+ media (sort: POPULARITY_DESC, type: ANIME) {
+ id
+ idMal
+ title {
+ romaji
+ }
+ coverImage {
+ large
+ }
+ averageScore
+ description
+ episodes
+ status
+ }
+ }
+ }
+ `,
+ variables: {
+ page: page,
+ perPage: 20,
+ },
+ }),
+ });
+ const get = await res.json();
+ if (get?.data?.Page?.media?.length === 0) {
+ setNextPage(false);
+ } else if (get !== null && page > 1) {
+ setData((prevData) => {
+ return [...(prevData ?? []), ...get?.data?.Page?.media];
+ });
+ setNextPage(get?.data?.Page?.pageInfo.hasNextPage);
+ } else {
+ setData(get?.data?.Page?.media);
+ }
+ setNextPage(get?.data?.Page?.pageInfo.hasNextPage);
+ setLoading(false);
+ };
+ fetchData();
+ }, [page]);
+
+ useEffect(() => {
+ function handleScroll() {
+ if (page > 5 || !nextPage) {
+ window.removeEventListener("scroll", handleScroll);
+ return;
+ }
+
+ if (
+ window.innerHeight + window.pageYOffset >=
+ document.body.offsetHeight - 3
+ ) {
+ setPage((prevPage) => prevPage + 1);
+ }
+ }
+
+ window.addEventListener("scroll", handleScroll);
+
+ return () => window.removeEventListener("scroll", handleScroll);
+ }, [page, nextPage]);
+
+ return (
+ <>
+ <MobileNav sessions={sessions} />
+ <div className="flex flex-col gap-2 items-center min-h-screen w-screen px-2 relative pb-10">
+ <div className="z-50 bg-primary pt-5 pb-3 shadow-md shadow-primary w-full fixed left-3">
+ <Link href="/en" className="flex gap-2 items-center font-karla">
+ <ChevronLeftIcon className="w-5 h-5" />
+ <h1 className="text-xl">Popular Anime</h1>
+ </Link>
+ </div>
+ <div className="grid grid-cols-2 xs:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-6 gap-3 max-w-6xl pt-16">
+ {data?.map((i, index) => (
+ <div
+ key={index}
+ className="flex flex-col items-center w-[150px] lg:w-[180px]"
+ >
+ <Link href={`/en/anime/${i.id}`} className="p-2">
+ <Image
+ src={i.coverImage.large}
+ alt={i.title.romaji}
+ width={500}
+ height={500}
+ className="w-[140px] h-[190px] lg:w-[170px] lg:h-[230px] object-cover rounded hover:scale-105 scale-100 transition-all duration-200 ease-out"
+ />
+ </Link>
+ <Link href={`/en/anime/${i.id}`} className="w-full px-2">
+ <h1 className="font-karla font-bold xl:text-base text-[15px] line-clamp-2">
+ {i.status === "RELEASING" ? (
+ <span className="dots bg-green-500" />
+ ) : i.status === "NOT_YET_RELEASED" ? (
+ <span className="dots bg-red-500" />
+ ) : null}
+ {i.title.romaji}
+ </h1>
+ </Link>
+ </div>
+ ))}
+
+ {loading && (
+ <>
+ {[1, 2, 4, 5, 6, 7, 8].map((item) => (
+ <div
+ key={item}
+ className="flex flex-col items-center w-[150px] lg:w-[180px]"
+ >
+ <div className="w-full p-2">
+ <Skeleton className="w-[140px] h-[190px] lg:w-[170px] lg:h-[230px] rounded" />
+ </div>
+ <div className="w-full px-2">
+ <Skeleton width={80} height={20} />
+ </div>
+ </div>
+ ))}
+ </>
+ )}
+ </div>
+ {!loading && page > 5 && nextPage && (
+ <button
+ onClick={() => setPage((p) => p + 1)}
+ className="bg-secondary xl:w-[30%] w-[80%] h-10 rounded-md"
+ >
+ Load More
+ </button>
+ )}
+ </div>
+ <Footer />
+ </>
+ );
+}
+
+export async function getServerSideProps(context) {
+ const session = await getServerSession(context.req, context.res, authOptions);
+
+ return {
+ props: {
+ sessions: session,
+ },
+ };
+}
diff --git a/pages/en/anime/trending.js b/pages/en/anime/trending.js
new file mode 100644
index 0000000..cbc30ab
--- /dev/null
+++ b/pages/en/anime/trending.js
@@ -0,0 +1,175 @@
+import { ChevronLeftIcon } from "@heroicons/react/24/solid";
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import Skeleton from "react-loading-skeleton";
+import Navbar from "../../../components/navbar";
+import Footer from "../../../components/footer";
+import { getServerSession } from "next-auth";
+import { authOptions } from "../../api/auth/[...nextauth]";
+import MobileNav from "../../../components/home/mobileNav";
+
+export default function TrendingAnime({ sessions }) {
+ const [data, setData] = useState(null);
+ const [page, setPage] = useState(1);
+ const [nextPage, setNextPage] = useState(true);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ setLoading(true);
+ const fetchData = async () => {
+ const res = await fetch("https://graphql.anilist.co", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ },
+ body: JSON.stringify({
+ query: `query ($page: Int, $perPage: Int) {
+ Page (page: $page, perPage: $perPage) {
+ pageInfo {
+ total
+ currentPage
+ lastPage
+ hasNextPage
+ perPage
+ }
+ media (sort: TRENDING_DESC, type: ANIME) {
+ id
+ idMal
+ title {
+ romaji
+ }
+ coverImage {
+ large
+ }
+ averageScore
+ description
+ episodes
+ status
+ }
+ }
+ }
+ `,
+ variables: {
+ page: page,
+ perPage: 20,
+ },
+ }),
+ });
+ const get = await res.json();
+ if (get?.data?.Page?.media?.length === 0) {
+ setNextPage(false);
+ } else if (get !== null && page > 1) {
+ setData((prevData) => {
+ return [...(prevData ?? []), ...get?.data?.Page?.media];
+ });
+ setNextPage(get?.data?.Page?.pageInfo.hasNextPage);
+ } else {
+ setData(get?.data?.Page?.media);
+ }
+ setNextPage(get?.data?.Page?.pageInfo.hasNextPage);
+ setLoading(false);
+ };
+ fetchData();
+ }, [page]);
+
+ useEffect(() => {
+ function handleScroll() {
+ if (page > 5 || !nextPage) {
+ window.removeEventListener("scroll", handleScroll);
+ return;
+ }
+
+ if (
+ window.innerHeight + window.pageYOffset >=
+ document.body.offsetHeight - 3
+ ) {
+ setPage((prevPage) => prevPage + 1);
+ }
+ }
+
+ window.addEventListener("scroll", handleScroll);
+
+ return () => window.removeEventListener("scroll", handleScroll);
+ }, [page, nextPage]);
+
+ return (
+ <>
+ <MobileNav sessions={sessions} />
+ <div className="flex flex-col gap-2 items-center min-h-screen w-screen px-2 relative pb-10">
+ <div className="z-50 bg-primary pt-5 pb-3 shadow-md shadow-primary w-full fixed left-3">
+ <Link href="/en" className="flex gap-2 items-center font-karla">
+ <ChevronLeftIcon className="w-5 h-5" />
+ <h1 className="text-xl">Trending Now</h1>
+ </Link>
+ </div>
+ <div className="grid grid-cols-2 xs:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-6 gap-3 max-w-6xl pt-16">
+ {data?.map((i, index) => (
+ <div
+ key={index}
+ className="flex flex-col items-center w-[150px] lg:w-[180px]"
+ >
+ <Link href={`/en/anime/${i.id}`} className="p-2">
+ <Image
+ src={i.coverImage.large}
+ alt={i.title.romaji}
+ width={500}
+ height={500}
+ className="w-[140px] h-[190px] lg:w-[170px] lg:h-[230px] object-cover rounded hover:scale-105 scale-100 transition-all duration-200 ease-out"
+ />
+ </Link>
+ <Link href={`/en/anime/${i.id}`} className="w-full px-2">
+ <h1 className="font-karla font-bold xl:text-base text-[15px] line-clamp-2">
+ {i.status === "RELEASING" ? (
+ <span className="dots bg-green-500" />
+ ) : i.status === "NOT_YET_RELEASED" ? (
+ <span className="dots bg-red-500" />
+ ) : null}
+ {i.title.romaji}
+ </h1>
+ </Link>
+ </div>
+ ))}
+
+ {loading && (
+ <>
+ {[1, 2, 4, 5, 6, 7, 8].map((item) => (
+ <div
+ key={item}
+ className="flex flex-col items-center w-[150px] lg:w-[180px]"
+ >
+ <div className="w-full p-2">
+ <Skeleton className="w-[140px] h-[190px] lg:w-[170px] lg:h-[230px] rounded" />
+ </div>
+ <div className="w-full px-2">
+ <Skeleton width={80} height={20} />
+ </div>
+ </div>
+ ))}
+ </>
+ )}
+ </div>
+ {!loading && page > 5 && nextPage && (
+ <button
+ onClick={() => setPage((p) => p + 1)}
+ className="bg-secondary xl:w-[30%] w-[80%] h-10 rounded-md mt-5"
+ >
+ Load More
+ </button>
+ )}
+ </div>
+ <Footer />
+ </>
+ );
+}
+
+export async function getServerSideProps(context) {
+ const session = await getServerSession(context.req, context.res, authOptions);
+
+ return {
+ props: {
+ sessions: session,
+ },
+ };
+}
diff --git a/pages/en/index.js b/pages/en/index.js
index 9cb516c..cbf96cd 100644
--- a/pages/en/index.js
+++ b/pages/en/index.js
@@ -8,7 +8,7 @@ import Content from "../../components/home/content";
import { motion } from "framer-motion";
-import { signIn, signOut } from "next-auth/react";
+import { signOut } from "next-auth/react";
import { useAniList } from "../../lib/anilist/useAnilist";
import { getServerSession } from "next-auth/next";
import { authOptions } from "../api/auth/[...nextauth]";
@@ -19,6 +19,7 @@ import getUpcomingAnime from "../../lib/anilist/getUpcomingAnime";
import { useCountdown } from "../../lib/useCountdownSeconds";
import Navigasi from "../../components/home/staticNav";
+import MobileNav from "../../components/home/mobileNav";
// Filter schedules for each day
// const filterByCountryOfOrigin = (schedule, country) => {
@@ -85,7 +86,6 @@ export default function Home({ detail, populars, sessions, upComing }) {
getRelease();
}, [release]);
- const [isVisible, setIsVisible] = useState(false);
const [list, setList] = useState(null);
const [planned, setPlanned] = useState(null);
const [greeting, setGreeting] = useState("");
@@ -95,14 +95,6 @@ export default function Home({ detail, populars, sessions, upComing }) {
const popular = populars?.data;
const data = detail.data[0];
- const handleShowClick = () => {
- setIsVisible(true);
- };
-
- const handleHideClick = () => {
- setIsVisible(false);
- };
-
useEffect(() => {
const time = new Date().getHours();
let greeting = "";
@@ -162,189 +154,7 @@ export default function Home({ detail, populars, sessions, upComing }) {
<link rel="icon" href="/c.svg" />
</Head>
- {/* NAVBAR */}
- <div className="z-50">
- {!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>
- )}
- </div>
-
- {/* Mobile Menu */}
- <div className={`transition-all duration-150 subpixel-antialiased z-50`}>
- {isVisible && sessions && (
- <Link
- href={`/en/profile/${sessions?.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]"
- >
- <img
- src={sessions?.user.image.large}
- alt="user avatar"
- 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="/en/" 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="/en/"
- className="font-karla font-bold text-[#8BA0B2] group-hover:text-action"
- >
- home
- </Link>
- </button>
- <button className="group flex flex-col items-center">
- <Link href="/en/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="/en/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="/en/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="/en/search/anime"
- className="font-karla font-bold text-[#8BA0B2] group-hover:text-action"
- >
- search
- </Link>
- </button>
- {sessions ? (
- <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>
+ <MobileNav sessions={sessions} />
<div className="h-auto w-screen bg-[#141519] text-[#dbdcdd] ">
<Navigasi />
@@ -432,6 +242,7 @@ export default function Home({ detail, populars, sessions, upComing }) {
section="On-Going Anime"
data={releaseData}
og={prog}
+ userName={sessions?.user?.name}
/>
</motion.div>
)}
@@ -449,6 +260,7 @@ export default function Home({ detail, populars, sessions, upComing }) {
section="Your Watch List"
data={list}
og={prog}
+ userName={sessions?.user?.name}
/>
</motion.div>
)}
@@ -466,6 +278,7 @@ export default function Home({ detail, populars, sessions, upComing }) {
ids="plannedAnime"
section="Your Plan"
data={planned}
+ userName={sessions?.user?.name}
/>
</motion.div>
)}
diff --git a/pages/en/profile/[user].js b/pages/en/profile/[user].js
index 6bc804e..b66699b 100644
--- a/pages/en/profile/[user].js
+++ b/pages/en/profile/[user].js
@@ -187,7 +187,11 @@ export default function MyList({ media, sessions, user, time }) {
{media.length !== 0 ? (
filterMedia(listFilter).map((item, index) => {
return (
- <div key={index} className="flex flex-col gap-5 mx-3">
+ <div
+ key={index}
+ id={item.status?.toLowerCase()}
+ className="flex flex-col gap-5 mx-3"
+ >
<h1 className="font-karla font-bold text-xl">{item.name}</h1>
<table className="bg-secondary rounded-lg">
<thead>
diff --git a/pages/en/search/[param].js b/pages/en/search/[param].js
index 480cebe..190002d 100644
--- a/pages/en/search/[param].js
+++ b/pages/en/search/[param].js
@@ -452,7 +452,9 @@ export default function Card() {
<h2 className="font-outfit xl:text-[15px] text-[11px] font-light pt-2 text-[#8B8B8B]">
{anime.format || <p>-</p>} &#183;{" "}
{anime.status || <p>-</p>} &#183;{" "}
- {anime.episodes || 0} Episodes
+ {anime.episodes
+ ? `${anime.episodes || "N/A"} Episodes`
+ : `${anime.chapters || "N/A"} Chapters`}
</h2>
</m.div>
);
generated by cgit v1.2.3 (git 2.25.1) at 2026-03-11 04:39:51 +0000