From 701798acaeb28f657bd1420d06253d350eb41b96 Mon Sep 17 00:00:00 2001
From: Factiven <dabinaya.fathan@gmail.com>
Date: Tue, 12 Sep 2023 21:45:30 +0700
Subject: initial v4 commit

---
 components/searchBar.js | 155 ------------------------------------------------
 1 file changed, 155 deletions(-)
 delete mode 100644 components/searchBar.js

(limited to 'components/searchBar.js')

diff --git a/components/searchBar.js b/components/searchBar.js
deleted file mode 100644
index 20d2d7c..0000000
--- a/components/searchBar.js
+++ /dev/null
@@ -1,155 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-import { motion as m, AnimatePresence } from "framer-motion";
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { useAniList } from "../lib/anilist/useAnilist";
-import Image from "next/image";
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-const SearchBar = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const searchBoxRef = useRef(null);
-
-  const router = useRouter();
-
-  const { aniAdvanceSearch } = useAniList();
-  const [data, setData] = useState(null);
-  const [query, setQuery] = useState("");
-
-  const [lang, setLang] = useState("en");
-
-  useEffect(() => {
-    if (isOpen) {
-      searchBoxRef.current.querySelector("input").focus();
-    }
-    const handleKeyDown = (e) => {
-      if (e.ctrlKey && e.code === "Space") {
-        setIsOpen((prev) => !prev);
-        setData(null);
-        setQuery("");
-      }
-    };
-
-    document.addEventListener("keydown", handleKeyDown);
-
-    const handleClick = (e) => {
-      if (searchBoxRef.current && !searchBoxRef.current.contains(e.target)) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("click", handleClick);
-
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      document.removeEventListener("click", handleClick);
-    };
-  }, [isOpen]);
-
-  async function search() {
-    const data = await aniAdvanceSearch({
-      search: query,
-      type: "ANIME",
-      perPage: 10,
-    });
-    setData(data);
-  }
-
-  useEffect(() => {
-    if (query) {
-      search();
-    }
-  }, [query]);
-
-  useEffect(() => {
-    const lang = localStorage.getItem("lang") || "id";
-    if (lang === "en" || lang === null) {
-      setLang("en");
-    } else if (lang === "id") {
-      setLang("id");
-    }
-  }, []);
-
-  function handleSubmit(e) {
-    e.preventDefault();
-    if (data?.media.length) {
-      router.push(`${lang}/anime/${data?.media[0].id}`);
-    }
-  }
-
-  return (
-    <AnimatePresence>
-      {isOpen && (
-        <m.div
-          initial={{ opacity: 0, y: -100 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -100 }}
-          className="fixed top-0 w-screen flex justify-center z-50"
-        >
-          <div
-            ref={searchBoxRef}
-            className={` bg-[#1c1c1fef] text-white p-4 ${
-              isOpen ? "flex" : "hidden"
-            } flex-col w-[80%] backdrop-blur-sm rounded-b-lg`}
-          >
-            <form onSubmit={handleSubmit}>
-              <input
-                type="text"
-                className="w-full rounded-lg px-4 py-2 mb-2 bg-[#474747]"
-                placeholder="Search..."
-                onChange={(e) => setQuery(e.target.value)}
-              />
-            </form>
-            <div className="flex flex-col gap-2 p-2 font-karla">
-              {data?.media.map((i) => (
-                <Link
-                  key={i.id}
-                  href={i.type === "ANIME" ? `${lang}/anime/${i.id}` : `/`}
-                  className="flex hover:bg-[#3e3e3e] rounded-md"
-                >
-                  <Image
-                    src={i.coverImage.extraLarge}
-                    alt="search results"
-                    width={500}
-                    height={500}
-                    className="object-cover w-14 h-14 rounded-md"
-                  />
-                  <div className="flex items-center justify-between w-full px-5">
-                    <div>
-                      <h1>{i.title.userPreferred}</h1>
-                      <h5 className="text-sm font-light text-[#878787] flex gap-2">
-                        {i.status
-                          ?.toLowerCase()
-                          .replace(/^\w/, (c) => c.toUpperCase())}{" "}
-                        {i.status && i.season && <>&#183;</>}{" "}
-                        {i.season
-                          ?.toLowerCase()
-                          .replace(/^\w/, (c) => c.toUpperCase())}{" "}
-                        {(i.status || i.season) && i.episodes && <>&#183;</>}{" "}
-                        {i.episodes || 0} Episodes
-                      </h5>
-                    </div>
-                    <div className="text-sm text-[#b5b5b5] ">
-                      <h1>
-                        {i.type
-                          ?.toLowerCase()
-                          .replace(/^\w/, (c) => c.toUpperCase())}
-                      </h1>
-                    </div>
-                  </div>
-                </Link>
-              ))}
-            </div>
-            {query && (
-              <button className="flex items-center gap-2 justify-center">
-                <MagnifyingGlassIcon className="h-5 w-5" />
-                <Link href={`${lang}/search/${query}`}>More Results...</Link>
-              </button>
-            )}
-          </div>
-        </m.div>
-      )}
-    </AnimatePresence>
-  );
-};
-
-export default SearchBar;
-- 
cgit v1.2.3