Merge pull request #3 from DevanAbinaya/main

main to pre-prod

4 files changed, 142 insertions, 74 deletions

diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 0000000..e10832d
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: Factiven
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
diff --git a/README.md b/README.md
index a783685..051e37a 100644
--- a/README.md
+++ b/README.md
@@ -70,19 +70,14 @@
 ## For Local Development
 
 1. Clone this repository using :
-
 ```bash
 git clone https://github.com/DevanAbinaya/Ani-Moopa.git
 ```
-
 2. Install package using npm :
-
 ```bash
 npm install
 ```
-
-3. Create `.env` file in the root folder and put this inside the file :
-
+3. Create ```.env``` file in the root folder and put this inside the file :
 ```bash
 CLIENT_ID="get the id from here https://anilist.co/settings/developer"
 CLIENT_SECRET="get the secret from here https://anilist.co/settings/developer"
@@ -92,7 +87,6 @@ NEXTAUTH_URL="for development use http://localhost:3000/ and for production use
 ```
 
 4. Start local server :
-
 ```bash
 npm run dev
 ```
@@ -112,5 +106,4 @@ This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md
 Thank You for passing by!! If you have any questions or feedback, please reach out to us at [[email protected]](mailto:[email protected]), or you can join our [discord sever](https://discord.gg/4xTGhr85BG).
 
 ## Support This Project
-
 [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/E1E6F9XZ3)
diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js
index 43b6ca9..f26c70d 100644
--- a/pages/anime/[...id].js
+++ b/pages/anime/[...id].js
@@ -173,9 +173,6 @@ export default function Info() {
     (data) => data.mediaRecommendation
   );
 
-  // console.log(rec);
-  // console.log(info);
-
   useEffect(() => {
     const defaultState = {
       data: null,
@@ -476,7 +473,7 @@ export default function Info() {
               </div>
 
               {/* PC */}
-              <div className="hidden md:flex gap-5 w-full flex-nowrap">
+              <div className="hidden md:flex gap-8 w-full flex-nowrap">
                 <div className="shrink-0 md:h-[250px] md:w-[180px] w-[115px] h-[164px] relative">
                   {info ? (
                     <>
@@ -497,7 +494,7 @@ export default function Info() {
                 </div>
 
                 {/* PC */}
-                <div className="hidden md:flex w-full flex-col gap-5 px-3 h-[250px]">
+                <div className="hidden md:flex w-full flex-col gap-5 h-[250px]">
                   <div className="flex flex-col gap-2">
                     <h1 className=" font-inter font-bold text-[36px] text-white line-clamp-1">
                       {info ? (
@@ -578,72 +575,76 @@ export default function Info() {
                   )}
                 </div>
                 <div
-                  className={`w-screen lg:w-full grid lg:grid-cols-3 justify-items-center gap-7 lg:pt-7 px-3 lg:px-4 pt-4 rounded-xl`}
+                  className={`w-screen lg:w-full grid lg:grid-cols-3 justify-items-center gap-7 lg:pt-7 lg:pb-5 px-3 lg:px-4 pt-4 rounded-xl`}
                 >
-                  {info?.relations?.edges
-                    ? info?.relations?.edges
-                        .slice(0, showAll ? info?.relations?.edges.length : 3)
-                        .map((r, index) => {
-                          const rel = r.node;
-                          return (
-                            <Link
+                  {info?.relations?.edges ? (
+                    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"
+                                ? `/anime/${rel.id}`
+                                : `/manga/detail/id?aniId=${
+                                    rel.id
+                                  }&aniTitle=${encodeURIComponent(
+                                    info?.title?.english ||
+                                      info?.title.romaji ||
+                                      info?.title.native
+                                  )}`
+                            }
+                            className={`hover:scale-[1.02] hover:shadow-lg md:px-0 px-4 scale-100 transition-transform duration-200 ease-out w-full ${
+                              rel.type === "MUSIC" ? "pointer-events-none" : ""
+                            }`}
+                          >
+                            <div
                               key={rel.id}
-                              href={
-                                rel.type === "ANIME" ||
-                                rel.type === "OVA" ||
-                                rel.type === "MOVIE" ||
-                                rel.type === "SPECIAL" ||
-                                rel.type === "ONA"
-                                  ? `/anime/${rel.id}`
-                                  : `/manga/detail/id?aniId=${
-                                      rel.id
-                                    }&aniTitle=${encodeURIComponent(
-                                      info?.title?.english ||
-                                        info?.title.romaji ||
-                                        info?.title.native
-                                    )}`
-                              }
-                              className={`hover:scale-[1.02] hover:shadow-lg md:px-0 px-4 scale-100 transition-transform duration-200 ease-out w-full ${
-                                rel.type === "MUSIC"
-                                  ? "pointer-events-none"
-                                  : ""
-                              }`}
+                              className="w-full shrink h-[126px] bg-secondary flex rounded-md"
                             >
-                              <div
-                                key={rel.id}
-                                className="w-full shrink h-[126px] bg-secondary flex rounded-md"
-                              >
-                                <div className="w-[90px] bg-image rounded-l-md shrink-0">
-                                  <Image
-                                    src={
-                                      rel.coverImage.extraLarge ||
-                                      rel.coverImage.large
-                                    }
-                                    alt={rel.id}
-                                    height={500}
-                                    width={500}
-                                    className="object-cover h-full w-full shrink-0 rounded-l-md"
-                                  />
+                              <div className="w-[90px] bg-image rounded-l-md shrink-0">
+                                <Image
+                                  src={
+                                    rel.coverImage.extraLarge ||
+                                    rel.coverImage.large
+                                  }
+                                  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">
+                                  {r.relationType}
                                 </div>
-                                <div className="h-full grid px-3 items-center">
-                                  <div className="text-action font-outfit font-bold">
-                                    {r.relationType}
-                                  </div>
-                                  <div className="font-outfit font-thin line-clamp-2">
-                                    {rel.title.userPreferred ||
-                                      rel.title.romaji}
-                                  </div>
-                                  <div className={``}>{rel.type}</div>
+                                <div className="font-outfit font-thin line-clamp-2">
+                                  {rel.title.userPreferred || rel.title.romaji}
                                 </div>
+                                <div className={``}>{rel.type}</div>
                               </div>
-                            </Link>
-                          );
-                        })
-                    : [1, 2, 3].map((item) => (
-                        <div key={item} className="w-full">
+                            </div>
+                          </Link>
+                        );
+                      })
+                  ) : (
+                    <>
+                      {[1, 2, 3].map((item) => (
+                        <div key={item} className="w-full hidden md:block">
                           <Skeleton className="h-[126px]" />
                         </div>
                       ))}
+                      <div className="w-full md:hidden">
+                        <Skeleton className="h-[126px]" />
+                      </div>
+                    </>
+                  )}
                 </div>
               </div>
               <div className="z-20 flex flex-col gap-10 p-3 lg:p-0">
@@ -683,8 +684,8 @@ export default function Info() {
                 {loading ? (
                   data && (
                     <div className="flex h-[640px] flex-col gap-5 scrollbar-thin scrollbar-thumb-[#1b1c21] scrollbar-thumb-rounded-full overflow-y-scroll hover:scrollbar-thumb-[#2e2f37]">
-                      {episode ? (
-                        episode.map((epi, index) => {
+                      {episode?.length !== 0 ? (
+                        episode?.map((epi, index) => {
                           return (
                             <div
                               key={index}
@@ -725,8 +726,13 @@ export default function Info() {
                     </div>
                   )
                 ) : (
-                  <div className="pb-10 w-full flex-center">
-                    Loading Episodes...
+                  <div className="flex justify-center">
+                    <div className="lds-ellipsis">
+                      <div></div>
+                      <div></div>
+                      <div></div>
+                      <div></div>
+                    </div>
                   </div>
                 )}
               </div>
diff --git a/styles/globals.css b/styles/globals.css
index b101081..ff7a1bb 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -147,3 +147,59 @@ button {
 .skip-button {
   @apply bg-white xs:w-28 xs:h-9 w-24 h-7 -right-8 -bottom-7 rounded-md font-karla shadow-xl hover:bg-[#f1f1f1] text-black md:static absolute xs:-right-6 xs:-bottom-5 xs:text-[15px] text-xs md:text-sm;
 }
+
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ellipsis div {
+  position: absolute;
+  top: 33px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: #27272e;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}