update search ui

src/features/search/ui/Search.tsx

@@ -3,13 +3,14 @@
 import { product_api } from '@/shared/config/api/product/api';
 import { ProductListResult } from '@/shared/config/api/product/type';
 import { useRouter } from '@/shared/config/i18n/navigation';
+import { Button } from '@/shared/ui/button';
 import { Input } from '@/shared/ui/input';
 import { ProductCard } from '@/widgets/categories/ui/product-card';
 import { useQuery } from '@tanstack/react-query';
-import { Search, X } from 'lucide-react';
+import { Search } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useSearchParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 const SearchResult = () => {
   const router = useRouter();
@@ -19,25 +20,6 @@ const SearchResult = () => {
   const query = searchParams.get('search') || '';
   const [inputValue, setInputValue] = useState(query);
 
-  /* 🔹 URL → Input sync */
-  useEffect(() => {
-    setInputValue(query);
-  }, [query]);
-
-  /* 🔹 Debounce → Input → URL sync */
-  useEffect(() => {
-    const delay = setTimeout(() => {
-      if (!inputValue.trim()) {
-        router.replace('/search');
-      } else {
-        router.replace(`/search?search=${encodeURIComponent(inputValue)}`);
-      }
-    }, 400);
-
-    return () => clearTimeout(delay);
-  }, [inputValue, router]);
-
-  /* 🔹 Default product list */
   const { data: productList, isLoading: listLoading } = useQuery({
     queryKey: ['product_list'],
     queryFn: () => product_api.list({ page: 1, page_size: 12 }),
@@ -46,12 +28,11 @@ const SearchResult = () => {
     staleTime: 0,
   });
 
-  /* 🔹 Search query */
   const { data: searchList, isLoading: searchLoading } = useQuery({
-    queryKey: ['search', query, inputValue],
+    queryKey: ['search', query],
     queryFn: () =>
       product_api.search({
-        search: inputValue, // agar backend `q` kutsa → q: query
+        search: query,
         page: 1,
         page_size: 12,
       }),
@@ -63,12 +44,6 @@ const SearchResult = () => {
   const data = query ? (searchList ?? []) : (productList ?? []);
   const isLoading = query ? searchLoading : listLoading;
 
-  /* 🔹 Handlers */
-  const clearSearch = () => {
-    setInputValue('');
-    router.replace('/search');
-  };
-
   return (
     <div className="custom-container min-h-screen">
       {/* 🔍 Search input */}
@@ -83,14 +58,23 @@ const SearchResult = () => {
             className="w-full pl-10 pr-10 h-12"
           />
 
-          {inputValue && (
+          <Button
+            className="absolute top-0 right-0 h-12 cursor-pointer"
+            onClick={() =>
+              router.replace(`/search?search=${encodeURIComponent(inputValue)}`)
+            }
+          >
+            {t('Qidirish')}
+          </Button>
+
+          {/* {inputValue && (
             <button
               onClick={clearSearch}
               className="absolute right-3 top-1/2 -translate-y-1/2"
             >
               <X className="w-5 h-5" />
             </button>
-          )}
+          )} */}
         </div>
       </div>