aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--components/footer.js18
-rw-r--r--components/hero/content.js7
-rw-r--r--components/layout.js4
-rw-r--r--components/navbar.js43
-rw-r--r--lib/useAnilist.js2
-rw-r--r--pages/anime/[...id].js18
-rw-r--r--pages/anime/watch/[...info].js382
-rw-r--r--pages/index.js34
-rw-r--r--pages/search.js502
-rw-r--r--pages/testing.js20
-rw-r--r--tailwind.config.js3
11 files changed, 536 insertions, 497 deletions
diff --git a/components/footer.js b/components/footer.js
index 4284dcf..77cf643 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -5,7 +5,7 @@ import Image from "next/image";
function Footer() {
return (
- <section className=" text-white z-40 bg-black md:flex md:h-[14rem] md:items-center md:justify-between">
+ <section className=" text-[#dbdcdd] z-40 bg-[#0c0d10] md:flex md:h-[14rem] md:items-center md:justify-between">
<div className="mx-auto flex w-[78%] flex-col space-y-10 py-10 md:flex-row md:items-center md:justify-between md:space-y-0 md:py-0">
<div className="md:flex md:flex-col md:gap-y-[3.88rem]">
<h1 className="font-outfit text-[2.56rem]">moopa</h1>
@@ -27,30 +27,30 @@ function Footer() {
<div className="flex flex-col gap-10 md:flex-row md:items-end md:gap-[9.06rem] ">
<div className="flex flex-col gap-10 font-karla font-bold md:flex-row md:gap-[5.94rem]">
<ul className="flex flex-col gap-y-[0.7rem] ">
- <li className="cursor-pointer hover:text-cyan-500">
+ <li className="cursor-pointer hover:text-action">
<a href="https://github.com/AniList/ApiV2-GraphQL-Docs">API</a>
</li>
- <li className="cursor-pointer hover:text-cyan-500">
+ <li className="cursor-pointer hover:text-action">
<Link href="/staff">Staff</Link>
</li>
- <li className="cursor-pointer hover:text-cyan-500">
+ <li className="cursor-pointer hover:text-action">
<Link href="/contact">Contact</Link>
</li>
- <li className="cursor-pointer hover:text-cyan-500">
+ <li className="cursor-pointer hover:text-action">
<Link href="/dmca">DMCA</Link>
</li>
</ul>
<ul className="flex flex-col gap-y-[0.7rem]">
- <li className="cursor-pointer hover:text-cyan-500">
+ <li className="cursor-pointer hover:text-action">
<a href="https://discord.gg/v5fjSdKwr2">Discord</a>
</li>
- <li className="cursor-pointer hover:text-cyan-500">
+ <li className="cursor-pointer hover:text-action">
<a href="https://www.instagram.com/dvnabny/">Instagram</a>
</li>
- <li className="cursor-pointer hover:text-cyan-500">
+ <li className="cursor-pointer hover:text-action">
<a href="https://twitter.com/Factivens">Twitter</a>
</li>
- <li className="cursor-pointer hover:text-cyan-500">
+ <li className="cursor-pointer hover:text-action">
<a href="https://github.com/DevanAbinaya">Github</a>
</li>
</ul>
diff --git a/components/hero/content.js b/components/hero/content.js
index b7515d2..96f49fd 100644
--- a/components/hero/content.js
+++ b/components/hero/content.js
@@ -52,13 +52,17 @@ export default function Content({ ids, section, data }) {
>
<Link
href={`/anime/${anime.id}`}
- className="hover:scale-105 duration-300 ease-in-out"
+ className="hover:scale-105 group relative duration-300 ease-in-out"
>
+ {/* <div className="fixed top-0 z-40 bg-black invisible group-hover:visible">
+ {anime.title.romaji || anime.title.english}
+ </div> */}
<Image
draggable={false}
src={
anime.image ||
anime.coverImage?.extraLarge ||
+ anime.coverImage?.large ||
"https://cdn.discordapp.com/attachments/986579286397964290/1058415946945003611/gray_pfp.png"
}
alt={anime.title.romaji || anime.title.english}
@@ -68,6 +72,7 @@ export default function Content({ ids, section, data }) {
blurDataURL={
anime.image ||
anime.coverImage?.extraLarge ||
+ anime.coverImage?.large ||
"https://cdn.discordapp.com/attachments/986579286397964290/1058415946945003611/gray_pfp.png"
}
className="z-20 h-[192px] w-[135px] object-cover lg:h-[265px] lg:w-[185px] rounded-md"
diff --git a/components/layout.js b/components/layout.js
index ab4159a..280fbdb 100644
--- a/components/layout.js
+++ b/components/layout.js
@@ -47,8 +47,8 @@ function Layout(props) {
isAtTop
? `px-2 pt-2 transition-all duration-1000 ${props.navTop}`
: isScrollingDown
- ? "md:h-16 md:translate-y-[-100%] md:shadow-sm md:bg-black "
- : "md:h-16 md:translate-y-0 md:shadow-sm md:bg-black"
+ ? "md:h-16 md:translate-y-[-100%] md:shadow-sm md:bg-[#0c0d10] "
+ : "md:h-16 md:translate-y-0 md:shadow-sm md:bg-[#0c0d10]"
}`}
/>
diff --git a/components/navbar.js b/components/navbar.js
index e0c1047..6bc5504 100644
--- a/components/navbar.js
+++ b/components/navbar.js
@@ -29,7 +29,7 @@ function Navbar(props) {
return (
<header className={`${props.className}`}>
- <div className="flex h-16 w-auto items-center justify-between px-5 md:mx-auto md:w-[80%] md:px-0 text-white">
+ <div className="flex h-16 w-auto items-center justify-between px-5 md:mx-auto md:w-[80%] md:px-0 text-[#dbdcdd]">
<div className="pb-2 font-outfit text-4xl font-semibold md:block">
<Link href="/">moopa</Link>
</div>
@@ -186,7 +186,7 @@ function Navbar(props) {
</div>
<nav className="left-0 top-[-100%] hidden w-auto items-center gap-10 px-5 md:flex">
- <ul className="hidden gap-10 font-roboto text-xl md:flex items-center">
+ <ul className="hidden gap-10 font-roboto text-md md:flex items-center">
<li>
<Link
href="/"
@@ -211,20 +211,31 @@ function Navbar(props) {
search
</Link>
</li>
- {!session && (
- <li>
- <button
- onClick={() => signIn("AniListProvider")}
- className="ring-1 ring-action font-karla font-bold p-2 rounded-md"
- >
- Sign in
- </button>
- </li>
- )}
- {session && (
- <li className="h-16 w-16 p-2">
- <img src={session?.user.image.large} alt="imagine" />
- </li>
+ {status === "loading" ? (
+ <li>Loading...</li>
+ ) : (
+ <>
+ {!session && (
+ <li>
+ <button
+ onClick={() => signIn("AniListProvider")}
+ className="ring-1 ring-action font-karla font-bold px-2 py-1 rounded-md"
+ >
+ Sign in
+ </button>
+ </li>
+ )}
+ {session && (
+ <li className="flex items-center justify-center">
+ <img
+ src={session?.user.image.large}
+ alt="imagine"
+ className="object-cover h-10 w-10 rounded-full"
+ />
+ {/* My List */}
+ </li>
+ )}
+ </>
)}
</ul>
</nav>
diff --git a/lib/useAnilist.js b/lib/useAnilist.js
index 12317f8..71882c0 100644
--- a/lib/useAnilist.js
+++ b/lib/useAnilist.js
@@ -78,7 +78,7 @@ export function useAniList(session) {
const progressWatched = `
mutation($mediaId: Int, $progress: Int) {
- SaveMediaListEntry(mediaId: $mediaId, progress: $progress) {
+ SaveMediaListEntry(mediaId: $mediaId, progress: $progress, status: CURRENT) {
id
mediaId
progress
diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js
index dd9a3d8..81e5706 100644
--- a/pages/anime/[...id].js
+++ b/pages/anime/[...id].js
@@ -120,17 +120,15 @@ export default function Himitsu({
<link rel="icon" href="/c.svg" />
</Head>
- <Layout navTop="text-white bg-[#121212] md:pt-0 md:px-0 bg-slate bg-opacity-40">
- <div className="text static flex w-screen flex-col justify-center pt-nav pb-10">
+ <Layout navTop="text-white bg-primary md:pt-0 md:px-0 bg-slate bg-opacity-40">
+ <div className="text static bg-primary flex w-screen flex-col justify-center pt-nav md:pt-1 pb-10">
<div className="pointer-events-none absolute top-0 left-0">
- <div className="brightness-90 bg-gradient-to-t from-[#121212] to-transparent">
- <img
- // ref={ref}
- src={info.cover || info.image}
- className="h-[300px] w-screen object-cover brightness-75 mix-blend-darken"
- />
- <div className="z-10 h-full drop-shadow-2xl bg-[#121212]" />
- </div>
+ <div className="absolute bg-gradient-to-t w-screen z-20 top-0 md:h-[300px] h-[420px] from-10% from-primary to-transparent" />
+ <img
+ // ref={ref}
+ src={info.cover || info.image}
+ className="md:h-[300px] h-[420px] w-screen object-cover brightness-50"
+ />
</div>
{isLoading ? (
<p>Loading cuy sabar...</p>
diff --git a/pages/anime/watch/[...info].js b/pages/anime/watch/[...info].js
index 075f730..552102c 100644
--- a/pages/anime/watch/[...info].js
+++ b/pages/anime/watch/[...info].js
@@ -153,45 +153,27 @@ export default function Info({ info }) {
</div>
</div>
</Modal>
- <Navigasi />
- <div className="min-h-screen 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%]">
- <div className="h-auto aspect-video z-20">
- <VideoPlayer
- key={info.id}
- data={info.epiData}
- seek={info.seek}
- titles={title}
- id={info.id}
- progress={parseInt(playingEpisode)}
- session={session}
- aniId={parseInt(data.id)}
- />
- </div>
- <div>
- <div className="">
- {data.episodes.length > 0 ? (
- data.episodes
- .filter((items) => items.id == info.id)
- .map((item) => (
- <div key={item.id} className="p-3 grid gap-2">
- <div className="text-xl font-outfit font-semibold line-clamp-2">
- <Link
- href={`/anime/${data.id}`}
- className="inline hover:underline"
- >
- {item.title}
- </Link>
- </div>
- <h4 className="text-sm font-karla font-light">
- Episode {item.number}
- </h4>
- </div>
- ))
- ) : (
- <>
- {fallback
- .filter((item) => item.id == info.id)
+ <div className="bg-primary">
+ <Navigasi />
+ <div className="min-h-screen 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%]">
+ <div className="h-auto aspect-video z-20">
+ <VideoPlayer
+ key={info.id}
+ data={info.epiData}
+ seek={info.seek}
+ titles={title}
+ id={info.id}
+ progress={parseInt(playingEpisode)}
+ session={session}
+ aniId={parseInt(data.id)}
+ />
+ </div>
+ <div>
+ <div className="">
+ {data.episodes.length > 0 ? (
+ data.episodes
+ .filter((items) => items.id == info.id)
.map((item) => (
<div key={item.id} className="p-3 grid gap-2">
<div className="text-xl font-outfit font-semibold line-clamp-2">
@@ -199,175 +181,195 @@ export default function Info({ info }) {
href={`/anime/${data.id}`}
className="inline hover:underline"
>
- {title}
+ {item.title}
</Link>
</div>
<h4 className="text-sm font-karla font-light">
Episode {item.number}
</h4>
</div>
- ))}
- </>
- )}
- </div>
- <div className="h-[1px] bg-[#3b3b3b]" />
- <div>
- <div className="px-4 pt-7 pb-4 h-full flex">
- <div className="aspect-[9/13] h-[240px]">
- <Image
- src={data.image}
- alt="Anime Cover"
- width={1000}
- height={1000}
- className="object-cover aspect-[9/13] h-[240px] rounded-md"
- />
- </div>
- <div className="grid w-full px-5 gap-3 h-[240px]">
- <div className="grid grid-cols-2 gap-1 items-center">
- <h2 className="text-sm font-light font-roboto text-[#878787]">
- Studios
- </h2>
- <div className="row-start-2">{data.studios}</div>
- <div className="grid col-start-2 place-content-end relative">
- <div className="" onClick={() => setOpen(true)}>
- <svg
- xmlns="http://www.w3.org/2000/svg"
- fill="none"
- viewBox="0 0 24 24"
- strokeWidth={1.5}
- stroke="currentColor"
- className="w-8 h-8 hover:fill-white hover:cursor-pointer"
- >
- <path
- strokeLinecap="round"
- strokeLinejoin="round"
- d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"
- />
- </svg>
- {/* <span className=" transition-all duration-300 absolute -top-12 bg-[#2c2c2c] font-karla p-2 rounded-l-lg rounded-tr-lg right-3 select-none">
- Save to My List
- </span> */}
- </div>
- </div>
- </div>
- <div className="grid gap-1 items-center">
- <h2 className="text-sm font-light font-roboto text-[#878787]">
- Status
- </h2>
- <div>{data.status}</div>
+ ))
+ ) : (
+ <>
+ {fallback
+ .filter((item) => item.id == info.id)
+ .map((item) => (
+ <div key={item.id} className="p-3 grid gap-2">
+ <div className="text-xl font-outfit font-semibold line-clamp-2">
+ <Link
+ href={`/anime/${data.id}`}
+ className="inline hover:underline"
+ >
+ {title}
+ </Link>
+ </div>
+ <h4 className="text-sm font-karla font-light">
+ Episode {item.number}
+ </h4>
+ </div>
+ ))}
+ </>
+ )}
+ </div>
+ <div className="h-[1px] bg-[#3b3b3b]" />
+ <div>
+ <div className="px-4 pt-7 pb-4 h-full flex">
+ <div className="aspect-[9/13] h-[240px]">
+ <Image
+ src={data.image}
+ alt="Anime Cover"
+ width={1000}
+ height={1000}
+ className="object-cover aspect-[9/13] h-[240px] rounded-md"
+ />
</div>
- <div className="grid gap-1 items-center overflow-y-hidden">
- <h2 className="text-sm font-light font-roboto text-[#878787]">
- Titles
- </h2>
- <div className="grid grid-flow-dense grid-cols-2 gap-2 h-full w-full">
- <div className="line-clamp-3">
- {data.title.romaji || ""}
- </div>
- <div className="line-clamp-3">
- {data.title.english || ""}
+ <div className="grid w-full px-5 gap-3 h-[240px]">
+ <div className="grid grid-cols-2 gap-1 items-center">
+ <h2 className="text-sm font-light font-roboto text-[#878787]">
+ Studios
+ </h2>
+ <div className="row-start-2">{data.studios}</div>
+ <div className="grid col-start-2 place-content-end relative">
+ <div className="" onClick={() => setOpen(true)}>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 24 24"
+ strokeWidth={1.5}
+ stroke="currentColor"
+ className="w-8 h-8 hover:fill-white hover:cursor-pointer"
+ >
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"
+ />
+ </svg>
+ {/* <span className=" transition-all duration-300 absolute -top-12 bg-[#2c2c2c] font-karla p-2 rounded-l-lg rounded-tr-lg right-3 select-none">
+ Save to My List
+ </span> */}
+ </div>
</div>
- <div className="line-clamp-3">
- {data.title.native || ""}
+ </div>
+ <div className="grid gap-1 items-center">
+ <h2 className="text-sm font-light font-roboto text-[#878787]">
+ Status
+ </h2>
+ <div>{data.status}</div>
+ </div>
+ <div className="grid gap-1 items-center overflow-y-hidden">
+ <h2 className="text-sm font-light font-roboto text-[#878787]">
+ Titles
+ </h2>
+ <div className="grid grid-flow-dense grid-cols-2 gap-2 h-full w-full">
+ <div className="line-clamp-3">
+ {data.title.romaji || ""}
+ </div>
+ <div className="line-clamp-3">
+ {data.title.english || ""}
+ </div>
+ <div className="line-clamp-3">
+ {data.title.native || ""}
+ </div>
</div>
</div>
</div>
</div>
- </div>
- <div className="flex flex-wrap gap-3 px-4 pt-3 ">
- {data.genres.map((item, index) => (
- <div
- key={index}
- className="border border-action text-gray-100 py-1 px-2 rounded-md font-karla text-sm"
- >
- {item}
- </div>
- ))}
- </div>
- <div className={`bg-[#2a2a2a] rounded-md mt-3 mx-3`}>
- <p
- dangerouslySetInnerHTML={{ __html: data.description }}
- className={`p-5 text-sm font-light font-roboto text-[#e4e4e4] `}
- />
+ <div className="flex flex-wrap gap-3 px-4 pt-3 ">
+ {data.genres.map((item, index) => (
+ <div
+ key={index}
+ className="border border-action text-gray-100 py-1 px-2 rounded-md font-karla text-sm"
+ >
+ {item}
+ </div>
+ ))}
+ </div>
+ <div className={`bg-secondary rounded-md mt-3 mx-3`}>
+ <p
+ dangerouslySetInnerHTML={{ __html: data.description }}
+ className={`p-5 text-sm font-light font-roboto text-[#e4e4e4] `}
+ />
+ </div>
</div>
</div>
</div>
- </div>
- <div className="flex flex-col w-screen lg:w-[33%] ">
- <h1 className="text-xl font-karla pl-4 pb-5 font-semibold">
- Episodes
- </h1>
- <div className="grid gap-5 lg:px-5 px-2 py-2 scrollbar-thin scrollbar-thumb-[#313131] scrollbar-thumb-rounded-full">
- {data.episodes.length > 0
- ? data.episodes.map((item) => {
- return (
- <Link
- href={`/anime/watch/${item.id}/${data.id}`}
- key={item.id}
- className={`bg-secondary flex w-full h-[110px] rounded-lg scale-100 transition-all duration-300 ease-out ${
- item.id == info.id
- ? "pointer-events-none ring-1 ring-action"
- : "cursor-pointer hover:scale-[1.02] ring-0 hover:ring-1 hover:shadow-lg ring-white"
- }`}
- >
- <div className="w-[40%] h-full relative shrink-0">
- <Image
- src={item.image}
- alt="image"
- height={1000}
- width={1000}
- className={`object-cover rounded-lg h-[110px] shadow-[4px_0px_5px_0px_rgba(0,0,0,0.3)] ${
- item.id == info.id
- ? "brightness-[30%]"
- : "brightness-75"
+ <div className="flex flex-col w-screen lg:w-[33%] ">
+ <h1 className="text-xl font-karla pl-4 pb-5 font-semibold">
+ Up Next
+ </h1>
+ <div className="grid gap-5 lg:px-5 px-2 py-2 scrollbar-thin scrollbar-thumb-[#313131] scrollbar-thumb-rounded-full">
+ {data.episodes.length > 0
+ ? data.episodes.map((item) => {
+ return (
+ <Link
+ href={`/anime/watch/${item.id}/${data.id}`}
+ key={item.id}
+ className={`bg-secondary flex w-full h-[110px] rounded-lg scale-100 transition-all duration-300 ease-out ${
+ item.id == info.id
+ ? "pointer-events-none ring-1 ring-action"
+ : "cursor-pointer hover:scale-[1.02] ring-0 hover:ring-1 hover:shadow-lg ring-white"
+ }`}
+ >
+ <div className="w-[40%] h-full relative shrink-0">
+ <Image
+ src={item.image}
+ alt="image"
+ height={1000}
+ width={1000}
+ className={`object-cover rounded-lg h-[110px] shadow-[4px_0px_5px_0px_rgba(0,0,0,0.3)] ${
+ item.id == info.id
+ ? "brightness-[30%]"
+ : "brightness-75"
+ }`}
+ />
+ <span className="absolute bottom-2 left-2 font-karla font-light text-sm">
+ Episode {item.number}
+ </span>
+ {item.id == info.id && (
+ <div className="absolute top-11 left-[105px] scale-[1.5]">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ className="w-5 h-5"
+ >
+ <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
+ </svg>
+ </div>
+ )}
+ </div>
+ <div
+ className={`w-[70%] h-full select-none p-4 flex flex-col gap-2 ${
+ item.id == info.id ? "text-[#7a7a7a]" : ""
}`}
- />
- <span className="absolute bottom-2 left-2 font-karla font-light text-sm">
- Episode {item.number}
- </span>
- {item.id == info.id && (
- <div className="absolute top-11 left-[105px] scale-[1.5]">
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 20 20"
- fill="currentColor"
- className="w-5 h-5"
- >
- <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
- </svg>
- </div>
- )}
- </div>
- <div
- className={`w-[70%] h-full select-none p-4 flex flex-col gap-2 ${
- item.id == info.id ? "text-[#7a7a7a]" : ""
+ >
+ <h1 className="font-karla font-bold italic line-clamp-1">
+ {item.title}
+ </h1>
+ <p className="line-clamp-2 text-xs italic font-outfit font-extralight">
+ {item.description}
+ </p>
+ </div>
+ </Link>
+ );
+ })
+ : fallback.map((item) => {
+ return (
+ <Link
+ href={`/anime/watch/${item.id}/${data.id}`}
+ key={item.id}
+ className={`bg-secondary flex-center w-full h-[50px] rounded-lg scale-100 transition-all duration-300 ease-out ${
+ item.id == info.id
+ ? "pointer-events-none ring-1 ring-action text-[#5d5d5d]"
+ : "cursor-pointer hover:scale-[1.02] ring-0 hover:ring-1 hover:shadow-lg ring-white"
}`}
>
- <h1 className="font-karla font-bold italic line-clamp-1">
- {item.title}
- </h1>
- <p className="line-clamp-2 text-xs italic font-outfit font-extralight">
- {item.description}
- </p>
- </div>
- </Link>
- );
- })
- : fallback.map((item) => {
- return (
- <Link
- href={`/anime/watch/${item.id}/${data.id}`}
- key={item.id}
- className={`bg-secondary flex-center w-full h-[50px] rounded-lg scale-100 transition-all duration-300 ease-out ${
- item.id == info.id
- ? "pointer-events-none ring-1 ring-action text-[#5d5d5d]"
- : "cursor-pointer hover:scale-[1.02] ring-0 hover:ring-1 hover:shadow-lg ring-white"
- }`}
- >
- Episode {item.number}
- </Link>
- );
- })}
+ Episode {item.number}
+ </Link>
+ );
+ })}
+ </div>
</div>
</div>
</div>
diff --git a/pages/index.js b/pages/index.js
index 5813363..a9aca07 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -11,6 +11,7 @@ import { useRouter } from "next/router";
import { motion } from "framer-motion";
import { useSession, signIn } from "next-auth/react";
+import { useAniList } from "../lib/useAnilist";
export function Navigasi() {
const { data: session, status } = useSession();
@@ -94,8 +95,11 @@ export function Navigasi() {
export default function Home({ detail, populars }) {
const { data: session, status } = useSession();
+ const { media } = useAniList(session);
+
const [isVisible, setIsVisible] = useState(false);
const [recently, setRecently] = useState(null);
+ const [plan, setPlan] = useState(null);
const [user, setUser] = useState(null);
const [array, setArray] = useState([]);
const popular = populars?.data;
@@ -112,13 +116,21 @@ export default function Home({ detail, populars }) {
};
// const reversed = user?.recentWatch.reverse();
- // console.log(array);
+ // console.log(plan);
useEffect(() => {
async function userData() {
if (!session) return;
const res = await fetch(`/api/get-user?userName=${session?.user.name}`);
const data = await res.json();
+
+ const getMedia =
+ media.filter((item) => item.status === "PAUSED")[0] || null;
+ const plan = getMedia?.entries
+ .map(({ media }) => media)
+ .filter((media) => media);
+
+ setPlan(plan);
setArray(data?.recentWatch.reverse());
setUser(data);
}
@@ -409,6 +421,22 @@ export default function Home({ detail, populars }) {
</motion.div>
)}
+ {session && plan && (
+ <motion.div // Add motion.div to each child component
+ key="plannedAnime"
+ initial={{ y: 20, opacity: 0 }}
+ whileInView={{ y: 0, opacity: 1 }}
+ transition={{ duration: 0.5 }}
+ viewport={{ once: true }}
+ >
+ <Content
+ ids="plannedAnime"
+ section="Start Watching Again"
+ data={plan}
+ />
+ </motion.div>
+ )}
+
{/* SECTION 2 */}
{detail && (
<motion.div // Add motion.div to each child component
@@ -478,8 +506,10 @@ function getGreeting() {
greeting = "Good morning";
} else if (time >= 12 && time < 18) {
greeting = "Good afternoon";
- } else {
+ } else if (time >= 18 && time < 22) {
greeting = "Good evening";
+ } else if (time >= 22 && time < 5) {
+ greeting = "Good night";
}
return greeting;
diff --git a/pages/search.js b/pages/search.js
index 4bb32af..e398e9e 100644
--- a/pages/search.js
+++ b/pages/search.js
@@ -153,269 +153,271 @@ export default function Card() {
<title>Moopa - search</title>
<link rel="icon" href="/c.svg" />
</Head>
- <Navbar />
- <div className="min-h-screen m-10 text-white items-center gap-5 lg:gap-0 flex flex-col">
- <div className="w-screen px-10 lg:w-[80%] lg:h-[10rem] flex text-center lg:items-end lg:pb-16 justify-center lg:gap-10 gap-3 font-karla font-light">
- <div className="text-start">
- <h1 className="font-bold lg:pb-5 pb-3 hidden lg:block text-md pl-1 font-outfit">
- TITLE
- </h1>
- <input
- className="lg:w-[297px] lg:h-[46px] h-[35px] w-[230px] xs:w-[280px] bg-[#26272B] rounded-[10px] font-karla font-light text-[#ffffff89] text-center"
- placeholder="search here..."
- type="text"
- onKeyDown={handleKeyDown}
- ref={inputRef}
- />
- </div>
-
- {/* TYPE */}
- <div className="hidden lg:block text-start">
- <h1 className="font-bold pb-5 text-md pl-1 font-outfit">TYPE</h1>
- <select
- className="w-[297px] h-[46px] bg-[#26272B] rounded-[10px] justify-between pl-[7.5rem] pr-5 flex items-center"
- value={type}
- onChange={(e) => setSelectedType(e.target.value)}
- >
- {types.map((option) => (
- <option key={option} value={option}>
- {option}
- </option>
- ))}
- </select>
- </div>
-
- {/* SORT */}
- <div className="hidden lg:block text-start">
- <h1 className="font-bold pb-5 text-md pl-1 font-outfit">SORT</h1>
- <select
- className="w-[297px] h-[46px] bg-[#26272B] rounded-[10px] flex items-center text-center"
- onChange={(e) => setSelectedSort(e.target.value)}
- >
- <option value="">Sort By</option>
- {sorts.map((option) => (
- <option key={option} value={option}>
- {option}
- </option>
- ))}
- </select>
- </div>
+ <div className="bg-primary">
+ <Navbar />
+ <div className="min-h-screen mt-10 mb-14 text-white items-center gap-5 lg:gap-0 flex flex-col">
+ <div className="w-screen px-10 lg:w-[80%] lg:h-[10rem] flex text-center lg:items-end lg:pb-16 justify-center lg:gap-10 gap-3 font-karla font-light">
+ <div className="text-start">
+ <h1 className="font-bold lg:pb-5 pb-3 hidden lg:block text-md pl-1 font-outfit">
+ TITLE
+ </h1>
+ <input
+ className="lg:w-[297px] lg:h-[46px] h-[35px] w-[230px] xs:w-[280px] bg-secondary rounded-[10px] font-karla font-light text-[#ffffff89] text-center"
+ placeholder="search here..."
+ type="text"
+ onKeyDown={handleKeyDown}
+ ref={inputRef}
+ />
+ </div>
- {/* OPTIONS */}
- <div className="flex lg:gap-7 text-center gap-3 items-end">
- <div
- className="lg:w-[73px] w-[50px] lg:h-[46px] h-[35px] bg-[#26272B] rounded-[10px] justify-center flex items-center cursor-pointer hover:bg-[#2F3136] transition-all duration-300"
- onClick={handleVisible}
- >
- <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"
+ {/* TYPE */}
+ <div className="hidden lg:block text-start">
+ <h1 className="font-bold pb-5 text-md pl-1 font-outfit">TYPE</h1>
+ <select
+ className="w-[297px] h-[46px] bg-secondary rounded-[10px] justify-between pl-[7.5rem] pr-5 flex items-center"
+ value={type}
+ onChange={(e) => setSelectedType(e.target.value)}
>
- <path
- strokeLinecap="round"
- strokeLinejoin="round"
- d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75"
- />
- </svg>
+ {types.map((option) => (
+ <option key={option} value={option}>
+ {option}
+ </option>
+ ))}
+ </select>
</div>
- {/* TRASH ICON */}
- <div
- className="lg:w-[73px] w-[50px] lg:h-[46px] h-[35px] bg-[#26272B] rounded-[10px] justify-center flex items-center cursor-pointer hover:bg-[#2F3136] transition-all duration-300"
- onClick={trash}
- >
- <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"
+ {/* SORT */}
+ <div className="hidden lg:block text-start">
+ <h1 className="font-bold pb-5 text-md pl-1 font-outfit">SORT</h1>
+ <select
+ className="w-[297px] h-[46px] bg-secondary rounded-[10px] flex items-center text-center"
+ onChange={(e) => setSelectedSort(e.target.value)}
>
- <path
- strokeLinecap="round"
- strokeLinejoin="round"
- d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
- />
- </svg>
+ <option value="">Sort By</option>
+ {sorts.map((option) => (
+ <option key={option} value={option}>
+ {option}
+ </option>
+ ))}
+ </select>
</div>
- </div>
- </div>
- <div className="w-screen lg:w-[64%] flex lg:justify-end lg:pl-0">
- <AnimatePresence>
- {isVisible && (
- <m.div
- key="imagine"
- initial={{ opacity: 0, y: -10 }}
- animate={{ opacity: 1, y: 0 }}
- exit={{ opacity: 0, y: -10 }}
- className="lg:pb-16"
+
+ {/* OPTIONS */}
+ <div className="flex lg:gap-7 text-center gap-3 items-end">
+ <div
+ className="lg:w-[73px] w-[50px] lg:h-[46px] h-[35px] bg-secondary rounded-[10px] justify-center flex items-center cursor-pointer hover:bg-[#272b35] transition-all duration-300 group"
+ onClick={handleVisible}
>
- <div className="text-start items-center lg:items-start flex w-screen lg:w-auto px-8 lg:px-0 flex-row justify-between lg:flex-col pb-5 ">
- <h1 className="font-bold lg:pb-5 text-md pl-1 font-outfit">
- GENRE
- </h1>
- <select
- className="w-[195px] lg:w-[297px] lg:h-[46px] h-[35px] bg-[#26272B] rounded-[10px] flex items-center text-center cursor-pointer hover:bg-[#2F3136] transition-all duration-300"
- onChange={(e) => setSelectedGenre(e.target.value)}
- >
- <option value="">Select a Genre</option>
- {genre.map((option) => (
- <option key={option} value={option}>
- {option}
- </option>
- ))}
- </select>
- </div>
- <div className="lg:hidden text-start items-center lg:items-start flex w-screen lg:w-auto px-8 lg:px-0 flex-row justify-between lg:flex-col pb-5 ">
- <h1 className="font-bold lg:pb-5 text-md pl-1 font-outfit">
- TYPE
- </h1>
- <select
- className="w-[195px] h-[35px] bg-[#26272B] rounded-[10px] flex items-center text-center cursor-pointer hover:bg-[#2F3136] transition-all duration-300"
- value={type}
- onChange={(e) => setSelectedType(e.target.value)}
- >
- {types.map((option) => (
- <option key={option} value={option}>
- {option}
- </option>
- ))}
- </select>
- </div>
+ <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="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75"
+ />
+ </svg>
+ </div>
- <div className="lg:hidden text-start items-center lg:items-start flex w-screen lg:w-auto px-8 lg:px-0 flex-row justify-between lg:flex-col ">
- <h1 className="font-bold lg:pb-5 text-md pl-1 font-outfit">
- SORT
- </h1>
- <select
- className="w-[195px] h-[35px] bg-[#26272B] rounded-[10px] flex items-center text-center cursor-pointer hover:bg-[#2F3136] transition-all duration-300"
- onChange={(e) => setSelectedSort(e.target.value)}
- >
- <option value="">Sort By</option>
- {sort.map((option) => (
- <option key={option} value={option}>
- {option}
- </option>
- ))}
- </select>
- </div>
- </m.div>
- )}
- </AnimatePresence>
- </div>
- <AnimatePresence>
- <div
- key="card-keys"
- className="grid pt-3 lg:grid-cols-5 justify-items-center grid-cols-3 w-screen px-2 lg:w-auto lg:gap-10 gap-2 lg:gap-y-24 gap-y-12 overflow-hidden"
- >
- {loading ? (
- <>
- <SkeletonTheme baseColor="#3B3C41" highlightColor="#4D4E52">
- <div
- className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
- style={{ scale: 0.98 }}
- >
- <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
- <Skeleton width={110} height={30} />
- </div>
- <div
- className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
- style={{ scale: 0.98 }}
- >
- <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
- <Skeleton width={110} height={30} />
- </div>
- <div
- className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
- style={{ scale: 0.98 }}
- >
- <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
- <Skeleton width={110} height={30} />
- </div>
- <div
- className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
- style={{ scale: 0.98 }}
- >
- <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
- <Skeleton width={110} height={30} />
- </div>
- <div
- className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
- style={{ scale: 0.98 }}
- >
- <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
- <Skeleton width={110} height={30} />
- </div>
- <div
- className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
- style={{ scale: 0.98 }}
- >
- <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
- <Skeleton width={110} height={30} />
+ {/* TRASH ICON */}
+ <div
+ className="lg:w-[73px] w-[50px] lg:h-[46px] h-[35px] bg-secondary rounded-[10px] justify-center flex items-center cursor-pointer hover:bg-[#272b35] transition-all duration-300 group"
+ onClick={trash}
+ >
+ <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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+ />
+ </svg>
+ </div>
+ </div>
+ </div>
+ <div className="w-screen lg:w-[64%] flex lg:justify-end lg:pl-0">
+ <AnimatePresence>
+ {isVisible && (
+ <m.div
+ key="imagine"
+ initial={{ opacity: 0, y: -10 }}
+ animate={{ opacity: 1, y: 0 }}
+ exit={{ opacity: 0, y: -10 }}
+ className="lg:pb-16"
+ >
+ <div className="text-start items-center lg:items-start flex w-screen lg:w-auto px-8 lg:px-0 flex-row justify-between lg:flex-col pb-5 ">
+ <h1 className="font-bold lg:pb-5 text-md pl-1 font-outfit">
+ GENRE
+ </h1>
+ <select
+ className="w-[195px] lg:w-[297px] lg:h-[46px] h-[35px] bg-secondary rounded-[10px] flex items-center text-center cursor-pointer hover:bg-[#272b35] transition-all duration-300"
+ onChange={(e) => setSelectedGenre(e.target.value)}
+ >
+ <option value="">Select a Genre</option>
+ {genre.map((option) => (
+ <option key={option} value={option}>
+ {option}
+ </option>
+ ))}
+ </select>
</div>
- <div
- className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
- style={{ scale: 0.98 }}
- >
- <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
- <Skeleton width={110} height={30} />
+ <div className="lg:hidden text-start items-center lg:items-start flex w-screen lg:w-auto px-8 lg:px-0 flex-row justify-between lg:flex-col pb-5 ">
+ <h1 className="font-bold lg:pb-5 text-md pl-1 font-outfit">
+ TYPE
+ </h1>
+ <select
+ className="w-[195px] h-[35px] bg-[#26272B] rounded-[10px] flex items-center text-center cursor-pointer hover:bg-[#272b35] transition-all duration-300"
+ value={type}
+ onChange={(e) => setSelectedType(e.target.value)}
+ >
+ {types.map((option) => (
+ <option key={option} value={option}>
+ {option}
+ </option>
+ ))}
+ </select>
</div>
- </SkeletonTheme>
- </>
- ) : data && data.media.length === 0 ? (
- <div className="w-screen text-[#ff7f57] lg:col-start-3 col-start-2 items-center flex justify-center text-center font-bold font-karla lg:text-2xl">
- Oops!<br></br> Nothing's Found...
- </div>
- ) : (
- data.media.map((anime) => {
- return (
- <m.div
- initial={{ scale: 0.9 }}
- animate={{ scale: 1, transition: { duration: 0.35 } }}
- className="w-[115px] xs:w-[140px] lg:w-[228px]"
- key={anime.id}
- >
- <Link
- href={
- anime.format === "MANGA" || anime.format === "NOVEL"
- ? `/manga/detail/id?aniId=${anime.id}&aniTitle=${anime.title.userPreferred}`
- : `/anime/${anime.id}`
- }
- className=""
+
+ <div className="lg:hidden text-start items-center lg:items-start flex w-screen lg:w-auto px-8 lg:px-0 flex-row justify-between lg:flex-col ">
+ <h1 className="font-bold lg:pb-5 text-md pl-1 font-outfit">
+ SORT
+ </h1>
+ <select
+ className="w-[195px] h-[35px] bg-[#26272B] rounded-[10px] flex items-center text-center cursor-pointer hover:bg-[#272b35] transition-all duration-300"
+ onChange={(e) => setSelectedSort(e.target.value)}
>
- <div
- // className=" bg-[#3B3C41] h-[313px] hover:ring-4 ring-[#ff8a57] transition-all cursor-pointer duration-100 ease-in-out rounded-[10px]"
- className=" bg-[#3B3C41] lg:h-[313px] xs:h-[215px] h-[175px] hover:scale-105 scale-100 transition-all cursor-pointer duration-200 ease-out rounded-[10px]"
- style={{
- backgroundImage: `url(${anime.coverImage.extraLarge})`,
- backgroundSize: "cover",
- backgroundPosition: "center",
- }}
- />
- </Link>
- <Link href={`/anime/${anime.id}`}>
- <h1 className="font-outfit font-bold lg:text-[20px] pt-4 title-overflow">
- {anime.title.userPreferred}
- </h1>
- </Link>
- <h2 className="font-outfit lg:text-[15px] text-[11px] font-light pt-2 text-[#8B8B8B]">
- {anime.format || <p>-</p>} &#183;{" "}
- {anime.status || <p>-</p>} &#183; {anime.episodes || 0}{" "}
- Episodes
- </h2>
- </m.div>
- );
- })
- )}
+ <option value="">Sort By</option>
+ {sort.map((option) => (
+ <option key={option} value={option}>
+ {option}
+ </option>
+ ))}
+ </select>
+ </div>
+ </m.div>
+ )}
+ </AnimatePresence>
</div>
- </AnimatePresence>
+ <AnimatePresence>
+ <div
+ key="card-keys"
+ className="grid pt-3 lg:grid-cols-5 justify-items-center grid-cols-3 w-screen px-2 lg:w-auto lg:gap-10 gap-2 lg:gap-y-24 gap-y-12 overflow-hidden"
+ >
+ {loading ? (
+ <>
+ <SkeletonTheme baseColor="#3B3C41" highlightColor="#4D4E52">
+ <div
+ className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
+ style={{ scale: 0.98 }}
+ >
+ <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
+ <Skeleton width={110} height={30} />
+ </div>
+ <div
+ className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
+ style={{ scale: 0.98 }}
+ >
+ <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
+ <Skeleton width={110} height={30} />
+ </div>
+ <div
+ className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
+ style={{ scale: 0.98 }}
+ >
+ <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
+ <Skeleton width={110} height={30} />
+ </div>
+ <div
+ className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
+ style={{ scale: 0.98 }}
+ >
+ <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
+ <Skeleton width={110} height={30} />
+ </div>
+ <div
+ className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
+ style={{ scale: 0.98 }}
+ >
+ <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
+ <Skeleton width={110} height={30} />
+ </div>
+ <div
+ className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
+ style={{ scale: 0.98 }}
+ >
+ <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
+ <Skeleton width={110} height={30} />
+ </div>
+ <div
+ className="flex flex-col w-[115px] xs:w-[140px] lg:w-[228px] gap-5"
+ style={{ scale: 0.98 }}
+ >
+ <Skeleton className="lg:h-[313px] xs:h-[215px] h-[175px]" />
+ <Skeleton width={110} height={30} />
+ </div>
+ </SkeletonTheme>
+ </>
+ ) : data && data.media.length === 0 ? (
+ <div className="w-screen text-[#ff7f57] lg:col-start-3 col-start-2 items-center flex justify-center text-center font-bold font-karla lg:text-2xl">
+ Oops!<br></br> Nothing's Found...
+ </div>
+ ) : (
+ data.media.map((anime) => {
+ return (
+ <m.div
+ initial={{ scale: 0.9 }}
+ animate={{ scale: 1, transition: { duration: 0.35 } }}
+ className="w-[115px] xs:w-[140px] lg:w-[228px]"
+ key={anime.id}
+ >
+ <Link
+ href={
+ anime.format === "MANGA" || anime.format === "NOVEL"
+ ? `/manga/detail/id?aniId=${anime.id}&aniTitle=${anime.title.userPreferred}`
+ : `/anime/${anime.id}`
+ }
+ className=""
+ >
+ <div
+ // className=" bg-[#3B3C41] h-[313px] hover:ring-4 ring-[#ff8a57] transition-all cursor-pointer duration-100 ease-in-out rounded-[10px]"
+ className=" bg-[#3B3C41] lg:h-[313px] xs:h-[215px] h-[175px] hover:scale-105 scale-100 transition-all cursor-pointer duration-200 ease-out rounded-[10px]"
+ style={{
+ backgroundImage: `url(${anime.coverImage.extraLarge})`,
+ backgroundSize: "cover",
+ backgroundPosition: "center",
+ }}
+ />
+ </Link>
+ <Link href={`/anime/${anime.id}`}>
+ <h1 className="font-outfit font-bold lg:text-[20px] pt-4 title-overflow">
+ {anime.title.userPreferred}
+ </h1>
+ </Link>
+ <h2 className="font-outfit lg:text-[15px] text-[11px] font-light pt-2 text-[#8B8B8B]">
+ {anime.format || <p>-</p>} &#183;{" "}
+ {anime.status || <p>-</p>} &#183; {anime.episodes || 0}{" "}
+ Episodes
+ </h2>
+ </m.div>
+ );
+ })
+ )}
+ </div>
+ </AnimatePresence>
+ </div>
+ <Footer />
</div>
- <Footer />
</>
);
}
diff --git a/pages/testing.js b/pages/testing.js
index cae165a..7540093 100644
--- a/pages/testing.js
+++ b/pages/testing.js
@@ -1,8 +1,7 @@
-import { getUser } from "./api/get-user";
-import { useSession, signIn } from "next-auth/react";
+import { signIn, signOut, useSession } from "next-auth/react";
-export default function Testing({ user }) {
- const { data: session } = useSession();
+export default function Testing() {
+ const { data: session, status } = useSession();
async function handleUpdate() {
const lastPlayed = {
id: "apahisya",
@@ -24,23 +23,14 @@ export default function Testing({ user }) {
console.log(res.status);
}
- console.log(user.settings);
+ console.log(session);
return (
<div>
<button onClick={() => handleUpdate()}>Click for update</button>
{!session && (
<button onClick={() => signIn("AniListProvider")}>LOGIN</button>
)}
+ {session && <button onClick={() => signOut()}>LOGOUT</button>}
</div>
);
}
-
-export async function getServerSideProps(context) {
- const user = await getUser("Factiven");
- console.log(user);
- return {
- props: {
- user: user,
- },
- };
-}
diff --git a/tailwind.config.js b/tailwind.config.js
index 066d8b7..44e8646 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -45,9 +45,10 @@ module.exports = {
},
colors: {
primary: "#141519",
- secondary: "#202020",
+ secondary: "#22252E",
action: "#FF7F57",
image: "#3B3C41",
+ txt: "#dbdcdd",
},
},
fontFamily: {
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-21 11:45:38 +0000