changed some color and fix some styles

components/layout/Footer.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { Instagram, Phone, Mail, MessageSquare } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Logo from "@/public/logo.png";
+
+export default function Footer() {
+  const t = useTranslations("common");
+
+  return (
+    <footer className="hidden lg:block w-full bg-white border-t border-gray-200 mt-auto">
+      <div className="mx-auto px-4 lg:px-6 max-w-[1520px] py-6">
+        <Link
+          href="/"
+          className="inline-block transition-opacity hover:opacity-80"
+        >
+          <div className="relative h-34 w-[200px]">
+            <Image
+              src={Logo}
+              alt="Logo"
+              fill
+              className="object-contain object-left"
+            />
+          </div>
+        </Link>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pb-4">
+          {/* Logo and Tagline */}
+          <div className="col-span-1 md:col-span-1 space-y-3">
+            <p className="text-base text-gray-500 max-w-xs">
+              SmartElectronics - yerli we daşary ýurt harytlarynyň onlaýn
+              marketi.
+            </p>
+            <ul className="space-y-3">
+              <li>
+                <Link
+                  className="mt-4 text-base text-gray-500 max-w-xs"
+                  href="/info"
+                >
+                  {t("about_us")}
+                </Link>
+              </li>
+              <li>
+                <Link
+                  className="mt-4 text-base text-gray-500 max-w-xs"
+                  href="/info"
+                >
+                  {t("contact_us")}
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Quick Links / Contact Info */}
+          <div className="space-y-4">
+            <h3 className="font-bold text-gray-900 text-lg">
+              {t("contact_us")}
+            </h3>
+            <div className="flex justify-between">
+              <ul className="space-y-3">
+                <li>
+                  <a
+                    href="tel:+99365123456"
+                    className="flex items-center gap-3 text-gray-600 hover:text-primary transition-colors group"
+                  >
+                    <div className="p-2 rounded-full bg-gray-50 group-hover:bg-primary/10 transition-colors">
+                      <Phone className="h-5 w-5" />
+                    </div>
+                    <span>+993 65 123456</span>
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="https://instagram.com/smartelectronics"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-3 text-gray-600 hover:text-primary transition-colors group"
+                  >
+                    <div className="p-2 rounded-full bg-gray-50 group-hover:bg-primary/10 transition-colors">
+                      <Instagram className="h-5 w-5" />
+                    </div>
+                    <span>@smartelectronics</span>
+                  </a>
+                </li>
+              </ul>
+              <ul className="space-y-3">
+                {" "}
+                <li>
+                  <a
+                    href="mailto:info@smartelectronics.com"
+                    className="flex items-center gap-3 text-gray-600 hover:text-primary transition-colors group"
+                  >
+                    <div className="p-2 rounded-full bg-gray-50 group-hover:bg-primary/10 transition-colors">
+                      <Mail className="h-5 w-5" />
+                    </div>
+                    <span>info@smartelectronics.com</span>
+                  </a>
+                </li>
+                <li>
+                  <div className="flex items-center gap-3 text-gray-600 group">
+                    <div className="p-2 rounded-full bg-gray-50">
+                      <MessageSquare className="h-5 w-5" />
+                    </div>
+                    <div className="flex flex-col">
+                      <span className="text-xs text-gray-400 font-medium">
+                        {t("imo")}
+                      </span>
+                      <span>+993 65 123456</span>
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          {/* Placeholder for other sections if needed */}
+          <div className="hidden md:block"></div>
+          <div className="hidden md:block"></div>
+        </div>
+
+        <div className="mt-6 pt-6 border-t border-gray-100 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-400">
+          <p>
+            © {new Date().getFullYear()} SmartElectronics. All rights reserved.
+          </p>
+          <div className="flex gap-6">
+            <Link href="#" className="hover:text-gray-600 transition-colors">
+              Terms
+            </Link>
+            <Link href="#" className="hover:text-gray-600 transition-colors">
+              Privacy
+            </Link>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

components/layout/Header.tsx

@@ -6,7 +6,7 @@ import Link from "next/link";
 import Image from "next/image";
 import { X, Search } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import Logo from "@/public/logo.webp";
+import Logo from "@/public/logo.png";
 import CategoryMenu from "./ui/CategoryMenu";
 import SearchBar from "./ui/SearchBar";
 import AuthDialog from "./ui/AuthDialog";
@@ -62,7 +62,7 @@ export default function Header({ locale = "ru" }: HeaderProps) {
               href="/"
               className="shrink-0 transition-opacity hover:opacity-80"
             >
-              <div className="relative h-8 w-[180px]">
+              <div className="relative h-32 w-[188px]">
                 <Image
                   src={Logo}
                   alt="Logo"

components/layout/MobileBar.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from "react";
 import Link from "next/link";
-import { Menu, Heart, Truck, ShoppingCart, User } from "lucide-react";
+import { Menu, Heart, Truck, ShoppingCart, Info } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -15,9 +15,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { useCategories, useFavorites, useOrders } from "@/lib/hooks";
 import { useCartCount } from "@/features/cart/hooks/useCart";
 import { useRouter } from "next/navigation";
-import { useAuthStatus } from "@/lib/hooks/useAuth";
 import { useTranslations } from "next-intl";
-import AuthDialog from "./ui/AuthDialog";
 
 interface MobileBottomNavProps {
   locale?: string;
@@ -39,10 +37,39 @@ export default function MobileBottomNav({
 }: MobileBottomNavProps) {
   const [isClient, setIsClient] = useState(false);
   const [isCategoryOpen, setIsCategoryOpen] = useState(false);
-  const [isLoginOpen, setIsLoginOpen] = useState(false);
+  const [expandedCategories, setExpandedCategories] = useState<Set<number>>(
+    new Set(),
+  );
+  const [touchStart, setTouchStart] = useState<number | null>(null);
   const t = useTranslations();
 
-  const { isAuthenticated, isLoading: authLoading } = useAuthStatus();
+  const handleTouchStart = (e: React.TouchEvent) => {
+    setTouchStart(e.targetTouches[0].clientX);
+  };
+
+  const handleTouchEnd = (e: React.TouchEvent) => {
+    if (touchStart === null) return;
+    const touchEnd = e.changedTouches[0].clientX;
+    const distance = touchStart - touchEnd;
+
+    // Side is left, so swiping left (negative delta or positive distance) closes it
+    if (distance > 50) {
+      setIsCategoryOpen(false);
+    }
+    setTouchStart(null);
+  };
+
+  const toggleCategory = (categoryId: number) => {
+    setExpandedCategories((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(categoryId)) {
+        newSet.delete(categoryId);
+      } else {
+        newSet.add(categoryId);
+      }
+      return newSet;
+    });
+  };
 
   const { data: categories = [] } = useCategories();
 
@@ -56,25 +83,6 @@ export default function MobileBottomNav({
     setIsClient(true);
   }, []);
 
-  const handleProfileClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (authLoading) {
-      return;
-    }
-
-    if (isAuthenticated) {
-      router.push(`/${locale}/me`);
-    } else {
-      if (onLoginClick) {
-        onLoginClick();
-      } else {
-        setIsLoginOpen(true);
-      }
-    }
-  };
-
   const handleNavigation = (path: string) => (e: React.MouseEvent) => {
     e.preventDefault();
     router.push(path);
@@ -85,40 +93,39 @@ export default function MobileBottomNav({
   return (
     <>
       {/* Mobile Bottom Navigation */}
-      <div className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t shadow-lg lg:hidden">
+      <div className="fixed bottom-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-md border-t border-gray-200 shadow-xl lg:hidden">
         <div className="flex items-center justify-around h-16 px-2">
           {/* Catalog Button */}
           <Button
             variant="ghost"
             size="sm"
-            className="flex-col gap-0.5 h-auto px-2 py-2"
+            className="flex-col gap-0.5 h-auto px-2 py-2 hover:bg-gray-100 rounded-xl transition-colors"
             onClick={() => {
               setIsCategoryOpen(true);
             }}
           >
-            <Menu className="h-5 w-5 text-gray-600" />
-            <span className="text-xs text-gray-700">{t("common.catalog")}</span>
+            <Menu className="h-5 w-5 text-gray-700" />
+            <span className="text-xs text-gray-700 font-medium">
+              {t("common.catalog")}
+            </span>
           </Button>
 
           {/* Favorites Button */}
           <Button
             variant="ghost"
             size="sm"
-            className="relative flex-col gap-0.5 h-auto px-2 py-2"
+            className="relative flex-col gap-0.5 h-auto px-2 py-2 hover:bg-gray-100 rounded-xl transition-colors"
             onClick={handleNavigation("/favorites")}
           >
             <div className="relative">
-              <Heart className="h-5 w-5 text-gray-600" />
+              <Heart className="h-5 w-5 text-gray-700" />
               {(favoritesData?.length || 0) > 0 && (
-                <Badge
-                  variant="destructive"
-                  className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
-                >
+                <Badge className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px] bg-gray-900 hover:bg-gray-900 text-white border-2 border-white font-bold">
                   {favoritesData?.length}
                 </Badge>
               )}
             </div>
-            <span className="text-xs text-gray-700">
+            <span className="text-xs text-gray-700 font-medium">
               {t("common.favorites")}
             </span>
           </Button>
@@ -127,59 +134,52 @@ export default function MobileBottomNav({
           <Button
             variant="ghost"
             size="sm"
-            className="relative flex-col gap-0.5 h-auto px-2 py-2"
+            className="relative flex-col gap-0.5 h-auto px-2 py-2 hover:bg-gray-100 rounded-xl transition-colors"
             onClick={handleNavigation("/orders")}
           >
             <div className="relative">
-              <Truck className="h-5 w-5 text-gray-600" />
+              <Truck className="h-5 w-5 text-gray-700" />
               {(ordersData?.length || 0) > 0 && (
-                <Badge
-                  variant="destructive"
-                  className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
-                >
+                <Badge className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px] bg-gray-900 hover:bg-gray-900 text-white border-2 border-white font-bold">
                   {ordersData?.length}
                 </Badge>
               )}
             </div>
-            <span className="text-xs text-gray-700">{t("common.orders")}</span>
+            <span className="text-xs text-gray-700 font-medium">
+              {t("common.orders")}
+            </span>
           </Button>
 
-          {/* Cart Button - OPTIMIZED */}
+          {/* Cart Button */}
           <Button
             variant="ghost"
             size="sm"
-            className="relative flex-col gap-0.5 h-auto px-2 py-2"
+            className="relative flex-col gap-0.5 h-auto px-2 py-2 hover:bg-gray-100 rounded-xl transition-colors"
             onClick={handleNavigation("/cart")}
           >
             <div className="relative">
-              <ShoppingCart className="h-5 w-5 text-gray-600" />
+              <ShoppingCart className="h-5 w-5 text-gray-700" />
               {cartCount > 0 && (
-                <Badge
-                  variant="destructive"
-                  className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
-                >
+                <Badge className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px] bg-gray-900 hover:bg-gray-900 text-white border-2 border-white font-bold">
                   {cartCount}
                 </Badge>
               )}
             </div>
-            <span className="text-xs text-gray-700">{t("common.cart")}</span>
+            <span className="text-xs text-gray-700 font-medium">
+              {t("common.cart")}
+            </span>
           </Button>
 
-          {/* Profile/Login Button */}
+          {/* Info Button */}
           <Button
             variant="ghost"
             size="sm"
-            className="flex-col gap-0.5 h-auto px-2 py-2"
-            onClick={handleProfileClick}
-            disabled={authLoading}
+            className="flex-col gap-0.5 h-auto px-2 py-2 hover:bg-gray-100 rounded-xl transition-colors"
+            onClick={() => router.push(`/${locale}/info`)}
           >
-            <User className="h-5 w-5 text-gray-600" />
-            <span className="text-xs text-gray-700">
-              {authLoading
-                ? "..."
-                : isAuthenticated
-                ? t("common.profile")
-                : t("common.login")}
+            <Info className="h-5 w-5 text-gray-700" />
+            <span className="text-xs text-gray-700 font-medium">
+              {t("common.info")}
             </span>
           </Button>
         </div>
@@ -187,46 +187,80 @@ export default function MobileBottomNav({
 
       {/* Category Sheet/Drawer */}
       <Sheet open={isCategoryOpen} onOpenChange={setIsCategoryOpen}>
-        <SheetContent side="left" className="w-[300px] p-0">
-          <SheetHeader className="p-4 border-b">
-            <SheetTitle>{t("common.catalog")}</SheetTitle>
+        <SheetContent
+          side="left"
+          className="w-[300px] p-0 rounded-none border-r-2 border-gray-200"
+          onTouchStart={handleTouchStart}
+          onTouchEnd={handleTouchEnd}
+        >
+          <SheetHeader className="p-6 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
+            <SheetTitle className="text-xl font-bold text-gray-900">
+              {t("common.catalog")}
+            </SheetTitle>
           </SheetHeader>
-          <ScrollArea className="h-[calc(100vh-80px)]">
+          <ScrollArea className="h-[calc(100vh-88px)]">
             <div className="p-4">
               {categories.map((category) => (
-                <div key={category.id} className="mb-4">
-                  <Link
-                    href={`/category/${category.slug}?category_id=${category.id}`}
-                    onClick={() => setIsCategoryOpen(false)}
-                    className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors font-semibold"
-                  >
-                    <span>{category.name}</span>
-                  </Link>
+                <div key={category.id} className="mb-1">
+                  <div className="flex items-center">
+                    <Link
+                      href={`/category/${category.slug}?category_id=${category.id}`}
+                      onClick={() => setIsCategoryOpen(false)}
+                      className="flex-1 flex items-center gap-2 px-3 py-2 rounded-xl hover:bg-gray-100 transition-all font-bold text-gray-900 hover:text-gray-700"
+                    >
+                      <span>{category.name}</span>
+                    </Link>
+
+                    {/* Toggle button if has children */}
+                    {category.children && category.children.length > 0 && (
+                      <button
+                        onClick={() => toggleCategory(category.id)}
+                        className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                      >
+                        <svg
+                          className={`w-4 h-4 text-gray-600 transition-transform ${
+                            expandedCategories.has(category.id)
+                              ? "rotate-180"
+                              : ""
+                          }`}
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M19 9l-7 7-7-7"
+                          />
+                        </svg>
+                      </button>
+                    )}
+                  </div>
 
                   {/* Subcategories */}
-                  {category.children && category.children.length > 0 && (
-                    <div className="ml-8 mt-2 space-y-1">
-                      {category.children.map((child: any) => (
-                        <Link
-                          key={child.id}
-                          href={`/category/${child.slug}?category_id=${child.id}`}
-                          onClick={() => setIsCategoryOpen(false)}
-                          className="block px-3 py-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded-lg transition-colors"
-                        >
-                          {child.name}
-                        </Link>
-                      ))}
-                    </div>
-                  )}
+                  {category.children &&
+                    category.children.length > 0 &&
+                    expandedCategories.has(category.id) && (
+                      <div className="ml-6 mt-1 space-y-0.5">
+                        {category.children.map((child: any) => (
+                          <Link
+                            key={child.id}
+                            href={`/category/${child.slug}?category_id=${child.id}`}
+                            onClick={() => setIsCategoryOpen(false)}
+                            className="block px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-all font-medium"
+                          >
+                            {child.name}
+                          </Link>
+                        ))}
+                      </div>
+                    )}
                 </div>
               ))}
             </div>
           </ScrollArea>
         </SheetContent>
       </Sheet>
-
-      {/* Local Auth Dialog  */}
-      <AuthDialog isOpen={isLoginOpen} onClose={() => setIsLoginOpen(false)} />
     </>
   );
 }

components/layout/ui/ActionButtons.tsx

@@ -117,7 +117,7 @@ function ActionButton({
     <Button
       variant="ghost"
       size="sm"
-      className="relative flex-col gap-1 h-auto px-3 py-2.5  hover:bg-gray-100 transition-all duration-200 group"
+      className="relative cursor-pointer flex-col gap-1 h-auto px-3 py-2.5  hover:bg-gray-100 transition-all duration-200 group"
       onClick={onClick}
     >
       <div className="relative">

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>
   );
 }