Update v3.5.7 (#12)

* Merge request (#11)

* Update v3.5.5 

> Now Skip button will hide if player is not in focused state.
> Added some options to player.
> Manga images should be displayed now.

* Update videoPlayer.js

* Revamp hero section #1

* UI Improvement

> Updating main page
> Updated Genres selection using params method
> Added search bar v1.0 on main page ( [ctrl + space] to access search bar )

* update meta

* Update [...id].js

* Update [...id].js

> Back to ssr I guess

* update episode selector

* Update [...info].js

* Update UI

> Added On-Going section for AniList user

* Update content.js

* added dynamic og

* Update og.jsx

* Update og

* Update og.jsx

* update og and id fallback

> Added fallback for anime info if it's not found

* Update v3.5.7

> Added On-Going section for AniList user
> Added Genre section
> Added dynamic Open Graph when sharing anime
> Added Episode Selector above information

1 files changed, 69 insertions, 0 deletions

diff --git a/components/hero/genres.js b/components/hero/genres.js
new file mode 100644
index 0000000..1c8a475
--- /dev/null
+++ b/components/hero/genres.js
@@ -0,0 +1,69 @@
+import Image from "next/image";
+import { ChevronRightIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+
+const g = [
+  {
+    name: "Action",
+    img: "https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx20958-HuFJyr54Mmir.jpg",
+  },
+  {
+    name: "Comedy",
+    img: "https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx21202-TfzXuWQf2oLQ.png",
+  },
+  {
+    name: "Horror",
+    img: "https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx127230-FlochcFsyoF4.png",
+  },
+  {
+    name: "Romance",
+    img: "https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx124080-h8EPH92nyRfS.jpg",
+  },
+  {
+    name: "Music",
+    img: "https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx130003-5Y8rYzg982sq.png",
+  },
+  {
+    name: "Sports",
+    img: "https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx20464-eW7ZDBOcn74a.png",
+  },
+];
+
+export default function Genres() {
+  return (
+    <div className="antialiased">
+      <div className="flex items-center justify-between lg:justify-normal lg:gap-3 px-5">
+        <h1 className="font-karla text-[20px] font-bold">Top Genres</h1>
+        <ChevronRightIcon className="w-5 h-5" />
+      </div>
+      <div className="flex xl:justify-center items-center relative">
+        <div className="bg-gradient-to-r from-primary to-transparent z-40 absolute w-7 h-[300px] left-0" />
+        <div className="flex lg:gap-8 gap-3 lg:p-10 py-8 px-5 z-30 overflow-y-hidden overflow-x-scroll snap-x snap-proximity scrollbar-none relative">
+          <div className="flex lg:gap-10 gap-3">
+            {g.map((a, index) => (
+              <Link
+                href={`/search/anime/?genres=${a.name}`}
+                key={index}
+                className="relative hover:shadow-lg hover:scale-105 duration-200 cursor-pointer ease-out h-[190px] w-[135px] lg:h-[265px] lg:w-[230px] rounded-md shrink-0"
+              >
+                <div className="bg-gradient-to-b from-transparent to-[#0c0d10] h-[190px] w-[135px] lg:h-[265px] lg:w-[230px] rounded-md absolute flex justify-center items-end">
+                  <h1 className="pb-7 lg:text-xl font-karla font-semibold">
+                    {a.name}
+                  </h1>
+                </div>
+                <Image
+                  src={a.img}
+                  alt="genres images"
+                  width={1000}
+                  height={1000}
+                  className="object-cover shrink-0 h-[190px] w-[135px] lg:h-[265px] lg:w-[230px] rounded-md"
+                />
+              </Link>
+            ))}
+          </div>
+        </div>
+        <div className="bg-gradient-to-l from-primary to-transparent z-40 absolute w-7 h-[300px] right-0" />
+      </div>
+    </div>
+  );
+}