Update v4 - Merge pre-push to main (#71)

* Create build-test.yml

* initial v4 commit

* update: github workflow

* update: push on branch

* Update .github/ISSUE_TEMPLATE/bug_report.md

* configuring next.config.js file

4 files changed, 792 insertions, 0 deletions

diff --git a/components/search/dropdown/inputSelect.js b/components/search/dropdown/inputSelect.js
new file mode 100644
index 0000000..d36ee6e
--- /dev/null
+++ b/components/search/dropdown/inputSelect.js
@@ -0,0 +1,111 @@
+import { Fragment } from "react";
+import { Combobox, Transition } from "@headlessui/react";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  MagnifyingGlassIcon,
+} from "@heroicons/react/20/solid";
+import React from "react";
+import { useRouter } from "next/router";
+
+export default function InputSelect({
+  data,
+  label,
+  keyDown,
+  selected,
+  setSelected,
+  query,
+  setQuery,
+  inputRef,
+}) {
+  const router = useRouter();
+
+  function handleChange(event) {
+    setSelected(event);
+    router.push(`/en/search/${event.value.toLowerCase()}`);
+  }
+
+  return (
+    <Combobox value={selected} onChange={(e) => handleChange(e)}>
+      <div className="relative mt-1 z-[55] w-full">
+        <div className="flex items-center gap-2 mb-2 relative">
+          <span className="font-bold text-lg">{label}</span>
+          <Combobox.Button className="py-[2px] bg-secondary/70 rounded text-sm font-karla flex items-center px-2">
+            {selected.name}
+            <ChevronDownIcon
+              className="h-5 w-5 text-gray-400"
+              aria-hidden="true"
+            />
+          </Combobox.Button>
+        </div>
+        <div className="relative w-full cursor-default overflow-hidden rounded-lg bg-secondary text-left shadow-md focus:outline-none sm:text-sm">
+          <input
+            type="text"
+            value={query || ""}
+            className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 bg-secondary text-gray-300 focus:ring-0 outline-none"
+            onKeyDown={keyDown}
+            onChange={(e) => setQuery(e.target.value)}
+            ref={inputRef}
+          />
+          <div className="absolute inset-y-0 right-0 flex items-center pr-2">
+            <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
+          </div>
+        </div>
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-200"
+          enterFrom="transform opacity-0 scale-95 translate-y-5"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95 translate-y-5"
+          afterLeave={() => setQuery("")}
+        >
+          <Combobox.Options
+            className="absolute z-[55] mt-1 max-h-60 w-full rounded-md bg-secondary py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+            style={{ scrollbarGutter: "stable" }}
+          >
+            {data.length === 0 && query !== "" ? (
+              <div className="relative cursor-default select-none py-2 px-4 text-gray-300">
+                Nothing found.
+              </div>
+            ) : (
+              data.map((item) => (
+                <Combobox.Option
+                  key={item.value}
+                  className={({ active }) =>
+                    `relative cursor-pointer select-none py-2 px-2 mx-2 rounded-md ${
+                      active ? "bg-white/5 text-white" : "text-gray-300"
+                    }`
+                  }
+                  value={item}
+                >
+                  {({ selected, active }) => (
+                    <React.Fragment>
+                      <span
+                        className={`block truncate ${
+                          selected ? "font-medium text-white" : "font-normal"
+                        }`}
+                      >
+                        {item.name}
+                      </span>
+                      {selected ? (
+                        <span
+                          className={`absolute inset-y-0 right-0 flex items-center pl-3 pr-1 ${
+                            active ? "text-white" : "text-action"
+                          }`}
+                        >
+                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                        </span>
+                      ) : null}
+                    </React.Fragment>
+                  )}
+                </Combobox.Option>
+              ))
+            )}
+          </Combobox.Options>
+        </Transition>
+      </div>
+    </Combobox>
+  );
+}
diff --git a/components/search/dropdown/multiSelector.js b/components/search/dropdown/multiSelector.js
new file mode 100644
index 0000000..8eea547
--- /dev/null
+++ b/components/search/dropdown/multiSelector.js
@@ -0,0 +1,168 @@
+import { Fragment, useState } from "react";
+import { Combobox, Transition } from "@headlessui/react";
+import { CheckIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
+import React from "react";
+
+export default function MultiSelector({
+  data,
+  other,
+  label,
+  selected,
+  setSelected,
+  inputRef,
+}) {
+  // const [selected, setSelected] = useState();
+  const [query, setQuery] = useState("");
+
+  const filteredMain =
+    query === ""
+      ? data
+      : data.filter((item) =>
+          item.name
+            .toLowerCase()
+            .replace(/\s+/g, "")
+            .includes(query.toLowerCase().replace(/\s+/g, ""))
+        );
+
+  const filteredOther =
+    query === ""
+      ? other
+      : other.filter((item) =>
+          item.name
+            .toLowerCase()
+            .replace(/\s+/g, "")
+            .includes(query.toLowerCase().replace(/\s+/g, ""))
+        );
+
+  return (
+    <Combobox value={selected} onChange={setSelected} multiple>
+      <div className="relative mt-1 min-w-full lg:min-w-[160px] w-full">
+        <div className="font-bold text-lg mb-2">{label}</div>
+        <div className="relative w-full cursor-default overflow-hidden rounded-lg bg-secondary text-left shadow-md focus:outline-none sm:text-sm">
+          <Combobox.Input
+            className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 bg-secondary text-gray-300 focus:ring-0 outline-none"
+            displayValue={(item) => item?.map((item) => item?.name).join(", ")}
+            placeholder="Any"
+            onChange={(event) => setQuery(event.target.value)}
+          />
+          <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
+            <ChevronDownIcon
+              className="h-5 w-5 text-gray-400"
+              aria-hidden="true"
+            />
+          </Combobox.Button>
+        </div>
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-200"
+          enterFrom="transform opacity-0 scale-95 translate-y-5"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95 translate-y-5"
+          afterLeave={() => setQuery("")}
+        >
+          <Combobox.Options
+            className="absolute z-50 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-white/10 scrollbar-thumb-rounded-lg mt-1 max-h-60 w-full overflow-auto rounded-md bg-secondary py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+            // style={{ scrollbarGutter: "stable" }}
+          >
+            {filteredOther.length === 0 &&
+            filteredMain.length === 0 &&
+            query !== "" ? (
+              <div className="relative cursor-default select-none py-2 px-4 text-gray-300">
+                Nothing found.
+              </div>
+            ) : (
+              <div className="space-y-1">
+                <span className="px-3 font-karla font-bold text-sm text-gray-200">
+                  GENRES
+                </span>
+                <div>
+                  {filteredMain.map((item) => (
+                    <Combobox.Option
+                      key={item.value}
+                      className={({ active }) =>
+                        `relative cursor-pointer select-none py-2 px-2 ml-2 mr-1 rounded-md ${
+                          active ? "bg-white/5 text-action" : "text-gray-300"
+                        }`
+                      }
+                      value={item}
+                    >
+                      {({ selected, active }) => (
+                        <React.Fragment>
+                          <span
+                            className={`block truncate ${
+                              selected
+                                ? "font-medium text-white"
+                                : "font-normal"
+                            }`}
+                          >
+                            {item.name}
+                          </span>
+                          {selected ? (
+                            <span
+                              className={`absolute inset-y-0 right-0 flex items-center pl-3 pr-1 ${
+                                active ? "text-white" : "text-action"
+                              }`}
+                            >
+                              <CheckIcon
+                                className="h-5 w-5"
+                                aria-hidden="true"
+                              />
+                            </span>
+                          ) : null}
+                        </React.Fragment>
+                      )}
+                    </Combobox.Option>
+                  ))}
+                </div>
+                <span className="px-3 font-karla font-bold text-sm text-gray-200">
+                  TAGS
+                </span>
+                <div>
+                  {filteredOther.map((item) => (
+                    <Combobox.Option
+                      key={item.value}
+                      className={({ active }) =>
+                        `relative cursor-pointer select-none py-2 px-2 ml-2 mr-1 rounded-md ${
+                          active ? "bg-white/5 text-white" : "text-gray-300"
+                        }`
+                      }
+                      value={item}
+                    >
+                      {({ selected, active }) => (
+                        <React.Fragment>
+                          <span
+                            className={`block truncate ${
+                              selected
+                                ? "font-medium text-white"
+                                : "font-normal"
+                            }`}
+                          >
+                            {item.name}
+                          </span>
+                          {selected ? (
+                            <span
+                              className={`absolute inset-y-0 right-0 flex items-center pl-3 pr-1 ${
+                                active ? "text-white" : "text-action"
+                              }`}
+                            >
+                              <CheckIcon
+                                className="h-5 w-5"
+                                aria-hidden="true"
+                              />
+                            </span>
+                          ) : null}
+                        </React.Fragment>
+                      )}
+                    </Combobox.Option>
+                  ))}
+                </div>
+              </div>
+            )}
+          </Combobox.Options>
+        </Transition>
+      </div>
+    </Combobox>
+  );
+}
diff --git a/components/search/dropdown/singleSelector.js b/components/search/dropdown/singleSelector.js
new file mode 100644
index 0000000..ec8afe0
--- /dev/null
+++ b/components/search/dropdown/singleSelector.js
@@ -0,0 +1,98 @@
+import { Fragment, useState } from "react";
+import { Combobox, Listbox, Transition } from "@headlessui/react";
+import { CheckIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
+import React from "react";
+
+export default function SingleSelector({ data, label, selected, setSelected }) {
+  // const [selected, setSelected] = useState();
+  const [query, setQuery] = useState("");
+
+  const filteredData =
+    query === ""
+      ? data
+      : data.filter((item) =>
+          item.name
+            .toLowerCase()
+            .replace(/\s+/g, "")
+            .includes(query.toLowerCase().replace(/\s+/g, ""))
+        );
+
+  return (
+    <Listbox value={selected} onChange={setSelected}>
+      <div className="relative mt-1 min-w-full lg:min-w-[160px] w-full">
+        <div className="font-bold text-lg mb-2">{label}</div>
+        <div className="relative w-full cursor-default overflow-hidden rounded-lg bg-secondary text-left shadow-md focus:outline-none sm:text-sm">
+          {/* <Combobox.Input
+            className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 bg-secondary text-gray-300 focus:ring-0 outline-none"
+            displayValue={(item) => item.name}
+            placeholder="Any"
+            onChange={(event) => setQuery(event.target.value)}
+          /> */}
+          <Listbox.Button className="w-full border-none py-2 text-start pl-3 text-sm leading-5 bg-secondary text-gray-400">
+            <span>{selected?.name || "Any"}</span>
+            <div className="absolute inset-y-0 right-0 flex items-center pr-2">
+              <ChevronDownIcon
+                className="h-5 w-5 text-gray-400"
+                aria-hidden="true"
+              />
+            </div>
+          </Listbox.Button>
+        </div>
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-200"
+          enterFrom="transform opacity-0 scale-95 translate-y-5"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95 translate-y-5"
+          afterLeave={() => setQuery("")}
+        >
+          <Listbox.Options
+            className="absolute z-50 scrollbar-thin scrollbar-thumb-white/10 scrollbar-thumb-rounded-lg mt-1 max-h-80 w-full overflow-auto rounded-md bg-secondary py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+            style={{ scrollbarGutter: "stable" }}
+          >
+            {filteredData.length === 0 && query !== "" ? (
+              <div className="relative cursor-default select-none py-2 px-4 text-gray-300">
+                Nothing found.
+              </div>
+            ) : (
+              filteredData.map((item) => (
+                <Listbox.Option
+                  key={item.value}
+                  className={({ active }) =>
+                    `relative cursor-pointer select-none py-2 px-2 ml-2 mr-1 rounded-md ${
+                      active ? "bg-white/5 text-action" : "text-gray-300"
+                    }`
+                  }
+                  value={item}
+                >
+                  {({ selected, active }) => (
+                    <React.Fragment>
+                      <span
+                        className={`block truncate ${
+                          selected ? "font-medium text-white" : "font-normal"
+                        }`}
+                      >
+                        {item.name}
+                      </span>
+                      {selected ? (
+                        <span
+                          className={`absolute inset-y-0 right-0 flex items-center pl-3 pr-1 ${
+                            active ? "text-white" : "text-action"
+                          }`}
+                        >
+                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                        </span>
+                      ) : null}
+                    </React.Fragment>
+                  )}
+                </Listbox.Option>
+              ))
+            )}
+          </Listbox.Options>
+        </Transition>
+      </div>
+    </Listbox>
+  );
+}
diff --git a/components/search/selection.js b/components/search/selection.js
new file mode 100644
index 0000000..767361d
--- /dev/null
+++ b/components/search/selection.js
@@ -0,0 +1,415 @@
+export const mediaType = [
+  { name: "Anime", value: "ANIME" },
+  { name: "Manga", value: "MANGA" },
+];
+export const genreOptions = [
+  {
+    name: "Action",
+    value: "Action",
+    type: "genres",
+  },
+  {
+    name: "Adventure",
+    value: "Adventure",
+    type: "genres",
+  },
+  {
+    name: "Comedy",
+    value: "Comedy",
+    type: "genres",
+  },
+  {
+    name: "Drama",
+    value: "Drama",
+    type: "genres",
+  },
+  {
+    name: "Ecchi",
+    value: "Ecchi",
+    type: "genres",
+  },
+  {
+    name: "Fantasy",
+    value: "Fantasy",
+    type: "genres",
+  },
+  {
+    name: "Horror",
+    value: "Horror",
+    type: "genres",
+  },
+  {
+    name: "Mahou Shoujo",
+    value: "Mahou Shoujo",
+    type: "genres",
+  },
+  {
+    name: "Mecha",
+    value: "Mecha",
+    type: "genres",
+  },
+  {
+    name: "Music",
+    value: "Music",
+    type: "genres",
+  },
+  {
+    name: "Mystery",
+    value: "Mystery",
+    type: "genres",
+  },
+  {
+    name: "Psychological",
+    value: "Psychological",
+    type: "genres",
+  },
+  {
+    name: "Romance",
+    value: "Romance",
+    type: "genres",
+  },
+  {
+    name: "Sci-Fi",
+    value: "Sci-Fi",
+    type: "genres",
+  },
+  {
+    name: "Slice of Life",
+    value: "Slice of Life",
+    type: "genres",
+  },
+  {
+    name: "Sports",
+    value: "Sports",
+    type: "genres",
+  },
+  {
+    name: "Supernatural",
+    value: "Supernatural",
+    type: "genres",
+  },
+  {
+    name: "Thriller",
+    value: "Thriller",
+    type: "genres",
+  },
+];
+export const tagsOption = [
+  { name: "4-koma", value: "4-koma", type: "tags" },
+  { name: "Achronological Order", value: "Achronological Order", type: "tags" },
+  { name: "Afterlife", value: "Afterlife", type: "tags" },
+  { name: "Age Gap", value: "Age Gap", type: "tags" },
+  { name: "Airsoft", value: "Airsoft", type: "tags" },
+  { name: "Aliens", value: "Aliens", type: "tags" },
+  { name: "Alternate Universe", value: "Alternate Universe", type: "tags" },
+  { name: "American Football", value: "American Football", type: "tags" },
+  { name: "Amnesia", value: "Amnesia", type: "tags" },
+  { name: "Anti-Hero", value: "Anti-Hero", type: "tags" },
+  { name: "Archery", value: "Archery", type: "tags" },
+  { name: "Assassins", value: "Assassins", type: "tags" },
+  { name: "Athletics", value: "Athletics", type: "tags" },
+  { name: "Augmented Reality", value: "Augmented Reality", type: "tags" },
+  { name: "Aviation", value: "Aviation", type: "tags" },
+  { name: "Badminton", value: "Badminton", type: "tags" },
+  { name: "Band", value: "Band", type: "tags" },
+  { name: "Bar", value: "Bar", type: "tags" },
+  { name: "Baseball", value: "Baseball", type: "tags" },
+  { name: "Basketball", value: "Basketball", type: "tags" },
+  { name: "Battle Royale", value: "Battle Royale", type: "tags" },
+  { name: "Biographical", value: "Biographical", type: "tags" },
+  { name: "Bisexual", value: "Bisexual", type: "tags" },
+  { name: "Body Swapping", value: "Body Swapping", type: "tags" },
+  { name: "Boxing", value: "Boxing", type: "tags" },
+  { name: "Bullying", value: "Bullying", type: "tags" },
+  { name: "Calligraphy", value: "Calligraphy", type: "tags" },
+  { name: "Card Battle", value: "Card Battle", type: "tags" },
+  { name: "Cars", value: "Cars", type: "tags" },
+  { name: "CGI", value: "CGI", type: "tags" },
+  { name: "Chibi", value: "Chibi", type: "tags" },
+  { name: "Chuunibyou", value: "Chuunibyou", type: "tags" },
+  { name: "Classic Literature", value: "Classic Literature", type: "tags" },
+  { name: "College", value: "College", type: "tags" },
+  { name: "Coming of Age", value: "Coming of Age", type: "tags" },
+  { name: "Cosplay", value: "Cosplay", type: "tags" },
+  { name: "Crossdressing", value: "Crossdressing", type: "tags" },
+  { name: "Crossover", value: "Crossover", type: "tags" },
+  { name: "Cultivation", value: "Cultivation", type: "tags" },
+  {
+    name: "Cute Girls Doing Cute Things",
+    value: "Cute Girls Doing Cute Things",
+    type: "tags",
+  },
+  { name: "Cyberpunk", value: "Cyberpunk", type: "tags" },
+  { name: "Cycling", value: "Cycling", type: "tags" },
+  { name: "Dancing", value: "Dancing", type: "tags" },
+  { name: "Delinquents", value: "Delinquents", type: "tags" },
+  { name: "Demons", value: "Demons", type: "tags" },
+  { name: "Development", value: "Development", type: "tags" },
+  { name: "Dragons", value: "Dragons", type: "tags" },
+  { name: "Drawing", value: "Drawing", type: "tags" },
+  { name: "Dystopian", value: "Dystopian", type: "tags" },
+  { name: "Economics", value: "Economics", type: "tags" },
+  { name: "Educational", value: "Educational", type: "tags" },
+  { name: "Ensemble Cast", value: "Ensemble Cast", type: "tags" },
+  { name: "Environmental", value: "Environmental", type: "tags" },
+  { name: "Episodic", value: "Episodic", type: "tags" },
+  { name: "Espionage", value: "Espionage", type: "tags" },
+  { name: "Fairy Tale", value: "Fairy Tale", type: "tags" },
+  { name: "Family Life", value: "Family Life", type: "tags" },
+  { name: "Fashion", value: "Fashion", type: "tags" },
+  { name: "Female Protagonist", value: "Female Protagonist", type: "tags" },
+  { name: "Fishing", value: "Fishing", type: "tags" },
+  { name: "Fitness", value: "Fitness", type: "tags" },
+  { name: "Flash", value: "Flash", type: "tags" },
+  { name: "Food", value: "Food", type: "tags" },
+  { name: "Football", value: "Football", type: "tags" },
+  { name: "Foreign", value: "Foreign", type: "tags" },
+  { name: "Fugitive", value: "Fugitive", type: "tags" },
+  { name: "Full CGI", value: "Full CGI", type: "tags" },
+  { name: "Full Colour", value: "Full Colour", type: "tags" },
+  { name: "Gambling", value: "Gambling", type: "tags" },
+  { name: "Gangs", value: "Gangs", type: "tags" },
+  { name: "Gender Bending", value: "Gender Bending", type: "tags" },
+  { name: "Gender Neutral", value: "Gender Neutral", type: "tags" },
+  { name: "Ghost", value: "Ghost", type: "tags" },
+  { name: "Gods", value: "Gods", type: "tags" },
+  { name: "Gore", value: "Gore", type: "tags" },
+  { name: "Guns", value: "Guns", type: "tags" },
+  { name: "Gyaru", value: "Gyaru", type: "tags" },
+  { name: "Harem", value: "Harem", type: "tags" },
+  { name: "Henshin", value: "Henshin", type: "tags" },
+  { name: "Hikikomori", value: "Hikikomori", type: "tags" },
+  { name: "Historical", value: "Historical", type: "tags" },
+  { name: "Ice Skating", value: "Ice Skating", type: "tags" },
+  { name: "Idol", value: "Idol", type: "tags" },
+  { name: "Isekai", value: "Isekai", type: "tags" },
+  { name: "Iyashikei", value: "Iyashikei", type: "tags" },
+  { name: "Josei", value: "Josei", type: "tags" },
+  { name: "Kaiju", value: "Kaiju", type: "tags" },
+  { name: "Karuta", value: "Karuta", type: "tags" },
+  { name: "Kemonomimi", value: "Kemonomimi", type: "tags" },
+  { name: "Kids", value: "Kids", type: "tags" },
+  { name: "Love Triangle", value: "Love Triangle", type: "tags" },
+  { name: "Mafia", value: "Mafia", type: "tags" },
+  { name: "Magic", value: "Magic", type: "tags" },
+  { name: "Mahjong", value: "Mahjong", type: "tags" },
+  { name: "Maids", value: "Maids", type: "tags" },
+  { name: "Male Protagonist", value: "Male Protagonist", type: "tags" },
+  { name: "Martial Arts", value: "Martial Arts", type: "tags" },
+  { name: "Memory Manipulation", value: "Memory Manipulation", type: "tags" },
+  { name: "Meta", value: "Meta", type: "tags" },
+  { name: "Military", value: "Military", type: "tags" },
+  { name: "Monster Girl", value: "Monster Girl", type: "tags" },
+  { name: "Mopeds", value: "Mopeds", type: "tags" },
+  { name: "Motorcycles", value: "Motorcycles", type: "tags" },
+  { name: "Musical", value: "Musical", type: "tags" },
+  { name: "Mythology", value: "Mythology", type: "tags" },
+  { name: "Nekomimi", value: "Nekomimi", type: "tags" },
+  { name: "Ninja", value: "Ninja", type: "tags" },
+  { name: "No Dialogue", value: "No Dialogue", type: "tags" },
+  { name: "Noir", value: "Noir", type: "tags" },
+  { name: "Nudity", value: "Nudity", type: "tags" },
+  { name: "Otaku Culture", value: "Otaku Culture", type: "tags" },
+  { name: "Outdoor", value: "Outdoor", type: "tags" },
+  { name: "Parody", value: "Parody", type: "tags" },
+  { name: "Philosophy", value: "Philosophy", type: "tags" },
+  { name: "Photography", value: "Photography", type: "tags" },
+  { name: "Pirates", value: "Pirates", type: "tags" },
+  { name: "Poker", value: "Poker", type: "tags" },
+  { name: "Police", value: "Police", type: "tags" },
+  { name: "Politics", value: "Politics", type: "tags" },
+  { name: "Post-Apocalyptic", value: "Post-Apocalyptic", type: "tags" },
+  { name: "Primarily Adult Cast", value: "Primarily Adult Cast", type: "tags" },
+  {
+    name: "Primarily Female Cast",
+    value: "Primarily Female Cast",
+    type: "tags",
+  },
+  { name: "Primarily Male Cast", value: "Primarily Male Cast", type: "tags" },
+  { name: "Puppetry", value: "Puppetry", type: "tags" },
+  { name: "Real Robot", value: "Real Robot", type: "tags" },
+  { name: "Rehabilitation", value: "Rehabilitation", type: "tags" },
+  { name: "Reincarnation", value: "Reincarnation", type: "tags" },
+  { name: "Revenge", value: "Revenge", type: "tags" },
+  { name: "Reverse Harem", value: "Reverse Harem", type: "tags" },
+  { name: "Robots", value: "Robots", type: "tags" },
+  { name: "Rugby", value: "Rugby", type: "tags" },
+  { name: "Rural", value: "Rural", type: "tags" },
+  { name: "Samurai", value: "Samurai", type: "tags" },
+  { name: "Satire", value: "Satire", type: "tags" },
+  { name: "School", value: "School", type: "tags" },
+  { name: "School Club", value: "School Club", type: "tags" },
+  { name: "Seinen", value: "Seinen", type: "tags" },
+  { name: "Ships", value: "Ships", type: "tags" },
+  { name: "Shogi", value: "Shogi", type: "tags" },
+  { name: "Shoujo", value: "Shoujo", type: "tags" },
+  { name: "Shoujo Ai", value: "Shoujo Ai", type: "tags" },
+  { name: "Shounen", value: "Shounen", type: "tags" },
+  { name: "Shounen Ai", value: "Shounen Ai", type: "tags" },
+  { name: "Slapstick", value: "Slapstick", type: "tags" },
+  { name: "Slavery", value: "Slavery", type: "tags" },
+  { name: "Space", value: "Space", type: "tags" },
+  { name: "Space Opera", value: "Space Opera", type: "tags" },
+  { name: "Steampunk", value: "Steampunk", type: "tags" },
+  { name: "Stop Motion", value: "Stop Motion", type: "tags" },
+  { name: "Super Power", value: "Super Power", type: "tags" },
+  { name: "Super Robot", value: "Super Robot", type: "tags" },
+  { name: "Superhero", value: "Superhero", type: "tags" },
+  { name: "Surreal Comedy", value: "Surreal Comedy", type: "tags" },
+  { name: "Survival", value: "Survival", type: "tags" },
+  { name: "Swimming", value: "Swimming", type: "tags" },
+  { name: "Swordplay", value: "Swordplay", type: "tags" },
+  { name: "Table Tennis", value: "Table Tennis", type: "tags" },
+  { name: "Tanks", value: "Tanks", type: "tags" },
+  { name: "Teacher", value: "Teacher", type: "tags" },
+  { name: "Tennis", value: "Tennis", type: "tags" },
+  { name: "Terrorism", value: "Terrorism", type: "tags" },
+  { name: "Time Manipulation", value: "Time Manipulation", type: "tags" },
+  { name: "Time Skip", value: "Time Skip", type: "tags" },
+  { name: "Tragedy", value: "Tragedy", type: "tags" },
+  { name: "Trains", value: "Trains", type: "tags" },
+  { name: "Triads", value: "Triads", type: "tags" },
+  { name: "Tsundere", value: "Tsundere", type: "tags" },
+  { name: "Urban Fantasy", value: "Urban Fantasy", type: "tags" },
+  { name: "Vampire", value: "Vampire", type: "tags" },
+  { name: "Video Games", value: "Video Games", type: "tags" },
+  { name: "Virtual World", value: "Virtual World", type: "tags" },
+  { name: "Volleyball", value: "Volleyball", type: "tags" },
+  { name: "War", value: "War", type: "tags" },
+  { name: "Witch", value: "Witch", type: "tags" },
+  { name: "Work", value: "Work", type: "tags" },
+  { name: "Wrestling", value: "Wrestling", type: "tags" },
+  { name: "Writing", value: "Writing", type: "tags" },
+  { name: "Wuxia", value: "Wuxia", type: "tags" },
+  { name: "Yakuza", value: "Yakuza", type: "tags" },
+  { name: "Yandere", value: "Yandere", type: "tags" },
+  { name: "Youkai", value: "Youkai", type: "tags" },
+  { name: "Zombie", value: "Zombie", type: "tags" },
+];
+export const formatOptions = [
+  { name: "TV", value: "TV" },
+  { name: "TV Short", value: "TV_SHORT" },
+  { name: "Movie", value: "MOVIE" },
+  { name: "Special", value: "SPECIAL" },
+  { name: "OVA", value: "OVA" },
+  { name: "ONA", value: "ONA" },
+  { name: "Music", value: "MUSIC" },
+  { name: "Manga", value: "MANGA" },
+  { name: "Novel", value: "NOVEL" },
+  { name: "One Shot", value: "ONE_SHOT" },
+];
+export const animeFormatOptions = [
+  { name: "TV", value: "TV" },
+  { name: "TV Short", value: "TV_SHORT" },
+  { name: "Movie", value: "MOVIE" },
+  { name: "Special", value: "SPECIAL" },
+  { name: "OVA", value: "OVA" },
+  { name: "ONA", value: "ONA" },
+];
+export const mangaFormatOptions = [
+  { name: "Manga", value: "MANGA" },
+  { name: "Novel", value: "NOVEL" },
+  { name: "One Shot", value: "ONE_SHOT" },
+];
+export const sortOptions = [
+  { name: "Date Added", value: "ID_DESC" },
+  { name: "Title", value: "TITLE_ROMAJI" },
+  { name: "Release Date", value: "START_DATE_DESC" },
+  { name: "Average Score", value: "SCORE_DESC" },
+  { name: "Popularity", value: "POPULARITY_DESC" },
+  { name: "Trending", value: ["TRENDING_DESC", "POPULARITY_DESC"] },
+  { name: "Favorites", value: "FAVOURITES_DESC" },
+];
+export const yearOptions = [
+  { name: "1940", value: "1940" },
+  { name: "1941", value: "1941" },
+  { name: "1942", value: "1942" },
+  { name: "1943", value: "1943" },
+  { name: "1944", value: "1944" },
+  { name: "1945", value: "1945" },
+  { name: "1946", value: "1946" },
+  { name: "1947", value: "1947" },
+  { name: "1948", value: "1948" },
+  { name: "1949", value: "1949" },
+  { name: "1950", value: "1950" },
+  { name: "1951", value: "1951" },
+  { name: "1952", value: "1952" },
+  { name: "1953", value: "1953" },
+  { name: "1954", value: "1954" },
+  { name: "1955", value: "1955" },
+  { name: "1956", value: "1956" },
+  { name: "1957", value: "1957" },
+  { name: "1958", value: "1958" },
+  { name: "1959", value: "1959" },
+  { name: "1960", value: "1960" },
+  { name: "1961", value: "1961" },
+  { name: "1962", value: "1962" },
+  { name: "1963", value: "1963" },
+  { name: "1964", value: "1964" },
+  { name: "1965", value: "1965" },
+  { name: "1966", value: "1966" },
+  { name: "1967", value: "1967" },
+  { name: "1968", value: "1968" },
+  { name: "1969", value: "1969" },
+  { name: "1970", value: "1970" },
+  { name: "1971", value: "1971" },
+  { name: "1972", value: "1972" },
+  { name: "1973", value: "1973" },
+  { name: "1974", value: "1974" },
+  { name: "1975", value: "1975" },
+  { name: "1976", value: "1976" },
+  { name: "1977", value: "1977" },
+  { name: "1978", value: "1978" },
+  { name: "1979", value: "1979" },
+  { name: "1980", value: "1980" },
+  { name: "1981", value: "1981" },
+  { name: "1982", value: "1982" },
+  { name: "1983", value: "1983" },
+  { name: "1984", value: "1984" },
+  { name: "1985", value: "1985" },
+  { name: "1986", value: "1986" },
+  { name: "1987", value: "1987" },
+  { name: "1988", value: "1988" },
+  { name: "1989", value: "1989" },
+  { name: "1990", value: "1990" },
+  { name: "1991", value: "1991" },
+  { name: "1992", value: "1992" },
+  { name: "1993", value: "1993" },
+  { name: "1994", value: "1994" },
+  { name: "1995", value: "1995" },
+  { name: "1996", value: "1996" },
+  { name: "1997", value: "1997" },
+  { name: "1998", value: "1998" },
+  { name: "1999", value: "1999" },
+  { name: "2000", value: "2000" },
+  { name: "2001", value: "2001" },
+  { name: "2002", value: "2002" },
+  { name: "2003", value: "2003" },
+  { name: "2004", value: "2004" },
+  { name: "2005", value: "2005" },
+  { name: "2006", value: "2006" },
+  { name: "2007", value: "2007" },
+  { name: "2008", value: "2008" },
+  { name: "2009", value: "2009" },
+  { name: "2010", value: "2010" },
+  { name: "2011", value: "2011" },
+  { name: "2012", value: "2012" },
+  { name: "2013", value: "2013" },
+  { name: "2014", value: "2014" },
+  { name: "2015", value: "2015" },
+  { name: "2016", value: "2016" },
+  { name: "2017", value: "2017" },
+  { name: "2018", value: "2018" },
+  { name: "2019", value: "2019" },
+  { name: "2020", value: "2020" },
+  { name: "2021", value: "2021" },
+  { name: "2022", value: "2022" },
+  { name: "2023", value: "2023" },
+  { name: "2024", value: "2024" },
+];
+export const seasonOptions = [
+  { name: "Winter", value: "WINTER" },
+  { name: "Spring", value: "SPRING" },
+  { name: "Summer", value: "SUMMER" },
+  { name: "Fall", value: "FALL" },
+];