From 3ba48e61924b661358716b2d9861031f7c308339 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Wed, 20 Nov 2024 20:00:58 +0500
Subject: [PATCH] feat: add search box to the bookmarks catrgory page

---
 app/pages/BookmarksCategory.tsx | 49 +++++++++++++++++++++++++++++++++
 app/pages/Search.tsx            |  2 +-
 2 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/app/pages/BookmarksCategory.tsx b/app/pages/BookmarksCategory.tsx
index f882bef..e5948e6 100644
--- a/app/pages/BookmarksCategory.tsx
+++ b/app/pages/BookmarksCategory.tsx
@@ -36,6 +36,7 @@ export function BookmarksCategoryPage(props: any) {
   const authState = useUserStore((state) => state.state);
   const [selectedSort, setSelectedSort] = useState(0);
   const [isLoadingEnd, setIsLoadingEnd] = useState(false);
+  const [searchVal, setSearchVal] = useState("");
   const router = useRouter();
 
   const getKey = (pageIndex: number, previousPageData: any) => {
@@ -93,6 +94,54 @@ export function BookmarksCategoryPage(props: any) {
 
   return (
     <>
+      <form
+        className="flex-1 max-w-full mx-4 mb-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          router.push(`/search?q=${searchVal}&where=list&list=${props.slug}`);
+        }}
+      >
+        <label
+          htmlFor="default-search"
+          className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
+        >
+          Search
+        </label>
+        <div className="relative">
+          <div className="absolute inset-y-0 flex items-center pointer-events-none start-0 ps-3">
+            <svg
+              className="w-4 h-4 text-gray-500 dark:text-gray-400"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 20 20"
+            >
+              <path
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
+              />
+            </svg>
+          </div>
+          <input
+            type="search"
+            id="default-search"
+            className="block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded-lg ps-10 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            placeholder="Поиск аниме..."
+            required
+            value={searchVal}
+            onChange={(e) => setSearchVal(e.target.value)}
+          />
+          <button
+            type="submit"
+            className="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+          >
+            Поиск
+          </button>
+        </div>
+      </form>
       <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black dark:border-white">
         <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
           {props.SectionTitleMapping[props.slug]}
diff --git a/app/pages/Search.tsx b/app/pages/Search.tsx
index 387bedb..8adf9be 100644
--- a/app/pages/Search.tsx
+++ b/app/pages/Search.tsx
@@ -189,7 +189,7 @@ export function SearchPage() {
               type="submit"
               className="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
             >
-              Search
+              Поиск
             </button>
           </div>
         </form>