changed some color and fix some styles

components/layout/ui/SearchBar.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React, { useState, useEffect, useRef } from "react";
-import { Search, X, Loader2 } from "lucide-react";
+import React, { useState } from "react";
+import { Search } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -11,8 +11,6 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { useRouter } from "next/navigation";
-import { useSearchProducts } from "@/features/search/hooks/useSearch";
-import Image from "next/image";
 import { SearchIcon } from "@/components/icons";
 
 interface SearchBarProps {
@@ -34,95 +32,26 @@ export default function SearchBar({
 }: SearchBarProps) {
   const router = useRouter();
   const [searchValue, setSearchValue] = useState("");
-  const [debouncedSearch, setDebouncedSearch] = useState("");
-  const [showResults, setShowResults] = useState(false);
-  const searchRef = useRef<HTMLDivElement>(null);
 
-  const { data, isLoading } = useSearchProducts({ q: debouncedSearch });
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDebouncedSearch(searchValue);
-    }, 300);
-
-    return () => clearTimeout(timer);
-  }, [searchValue]);
-
-  useEffect(() => {
-    if (debouncedSearch && data?.data && data.data.length > 0) {
-      setShowResults(true);
-    } else {
-      setShowResults(false);
+  const performSearch = () => {
+    if (searchValue.trim()) {
+      router.push(
+        `/${locale}/search?q=${encodeURIComponent(searchValue.trim())}`,
+      );
+      if (onClose) onClose();
     }
-  }, [debouncedSearch, data]);
+  };
 
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (searchRef.current && !searchRef.current.contains(e.target as Node)) {
-        setShowResults(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      performSearch();
+    }
+  };
 
   const handleSearch = (value: string) => {
     setSearchValue(value);
   };
 
-  const handleProductClick = (productId: number) => {
-    router.push(`/${locale}/product/${productId}`);
-    setSearchValue("");
-    setShowResults(false);
-    if (onClose) onClose();
-  };
-
-  const handleClearSearch = () => {
-    setSearchValue("");
-    setShowResults(false);
-  };
-
-  const SearchResults = () => {
-    if (!showResults || !data?.data) return null;
-
-    return (
-      <div className="absolute top-full left-0 right-0 mt-2 bg-white border border-gray-200 rounded-lg shadow-2xl max-h-[500px] overflow-y-auto z-50 animate-slide-up">
-        <div className="p-2">
-          {data.data.map((product, index) => (
-            <button
-              key={product.id}
-              onClick={() => handleProductClick(product.id)}
-              className={`w-full cursor-pointer flex items-center gap-4 p-3 rounded-lg hover:bg-gray-50 transition-all duration-200 group ${
-                index !== data.data.length - 1 ? "border-b border-gray-100" : ""
-              }`}
-            >
-              <div className="relative w-20 h-20 shrink-0 rounded-lg overflow-hidden bg-gray-50 border border-gray-100">
-                <Image
-                  src={product.thumbnail}
-                  alt={product.name}
-                  fill
-                  className="object-cover group-hover:scale-105 transition-transform duration-200"
-                />
-              </div>
-              <div className="flex-1 text-left min-w-0">
-                <p className="font-semibold text-sm line-clamp-2 text-gray-900 group-hover:text-gray-700 transition-colors mb-1">
-                  {product.name}
-                </p>
-                <p className="text-base font-bold text-gray-900 mb-1">
-                  {product.price_amount} TMT
-                </p>
-                <p className="text-xs text-gray-500 font-medium">
-                  {product.brand.name}
-                </p>
-              </div>
-            </button>
-          ))}
-        </div>
-      </div>
-    );
-  };
-
   if (isMobile) {
     return (
       <Dialog open={isOpen} onOpenChange={onClose}>
@@ -132,22 +61,22 @@ export default function SearchBar({
               {searchPlaceholder}
             </DialogTitle>
           </DialogHeader>
-          <div className="relative" ref={searchRef}>
+          <div className="relative">
             <div className="relative">
               <Input
                 type="text"
                 placeholder={searchPlaceholder}
                 value={searchValue}
                 onChange={(e) => handleSearch(e.target.value)}
+                onKeyDown={handleKeyDown}
                 className="h-12 rounded-lg pl-12 pr-10 border-gray-200 focus:border-gray-900 focus-visible:border-gray-900 focus-visible:ring-0 transition-colors"
                 autoFocus
               />
-              <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
-              {isLoading && (
-                <Loader2 className="absolute right-4 top-1/2 -translate-y-1/2 h-5 w-5 animate-spin text-gray-400" />
-              )}
+              <Search
+                className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 cursor-pointer"
+                onClick={performSearch}
+              />
             </div>
-            <SearchResults />
           </div>
         </DialogContent>
       </Dialog>
@@ -157,7 +86,6 @@ export default function SearchBar({
   return (
     <div
       className={`bg-gray-900 rounded-lg flex items-center relative shadow-sm hover:shadow-md transition-shadow duration-200 ${className}`}
-      ref={searchRef}
     >
       <div className="w-full relative">
         <div className="relative">
@@ -166,21 +94,19 @@ export default function SearchBar({
             placeholder={searchPlaceholder}
             value={searchValue}
             onChange={(e) => handleSearch(e.target.value)}
+            onKeyDown={handleKeyDown}
             className="border w-full rounded-lg h-11 border-gray-900 bg-white pl-12 pr-4 focus-visible:ring-2 focus-visible:ring-gray-300 transition-all"
           />
           <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 pointer-events-none" />
         </div>
-        {isLoading && (
-          <Loader2 className="absolute right-4 top-1/2 -translate-y-1/2 h-5 w-5 animate-spin text-gray-400" />
-        )}
       </div>
       <Button
         size="icon"
+        onClick={performSearch}
         className="h-11 w-11 hover:bg-gray-800 cursor-pointer bg-transparent flex items-center mr-1 text-white rounded-lg transition-colors"
       >
         <SearchIcon />
       </Button>
-      <SearchResults />
     </div>
   );
 }