feat add search bar to pages

app/pages/Collections.tsx

@@ -7,11 +7,12 @@ const fetcher = (...args: any) =>
 import { useUserStore } from "#/store/auth";
 import { ENDPOINTS } from "#/api/config";
 import { useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 export function CollectionsPage() {
   const userStore = useUserStore();
   const router = useRouter();
+  const [searchVal, setSearchVal] = useState("");
 
   function useFetchReleases(section: string) {
     let url: string;
@@ -47,6 +48,55 @@ export function CollectionsPage() {
           </div>
         )}
 
+      <form
+        className="flex-1 max-w-full mx-4 mb-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          router.push(`/search?q=${searchVal}&where=collections`);
+        }}
+      >
+        <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>
+
       {userCollections && userCollections.content && (
         <CollectionCourusel
           sectionTitle="Мои коллекции"

app/pages/Favorites.tsx

@@ -36,6 +36,7 @@ export function FavoritesPage() {
   const [selectedSort, setSelectedSort] = useState(0);
   const [isLoadingEnd, setIsLoadingEnd] = useState(false);
   const router = useRouter();
+  const [searchVal, setSearchVal] = useState("");
 
   const getKey = (pageIndex: number, previousPageData: any) => {
     if (previousPageData && !previousPageData.content.length) return null;
@@ -79,6 +80,55 @@ export function FavoritesPage() {
 
   return (
     <>
+      <form
+        className="flex-1 max-w-full mx-4 mb-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          router.push(`/search?q=${searchVal}&where=favorites`);
+        }}
+      >
+        <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">
           Избранное

app/pages/History.tsx

@@ -28,6 +28,7 @@ export function HistoryPage() {
   const authState = useUserStore((state) => state.state);
   const [isLoadingEnd, setIsLoadingEnd] = useState(false);
   const router = useRouter();
+  const [searchVal, setSearchVal] = useState("");
 
   const getKey = (pageIndex: number, previousPageData: any) => {
     if (previousPageData && !previousPageData.content.length) return null;
@@ -71,6 +72,54 @@ export function HistoryPage() {
 
   return (
     <>
+      <form
+        className="flex-1 max-w-full mx-4 mb-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          router.push(`/search?q=${searchVal}&where=history`);
+        }}
+      >
+        <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>
       {content && content.length > 0 ? (
         <>
           <ReleaseSection sectionTitle="История" content={content} />