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="Мои коллекции"