added debounce to - + buttons

components/empty-states/EmptyCart.tsx

@@ -1,32 +0,0 @@
-import { ShoppingCart } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import Link from "next/link"
-
-interface EmptyCartProps {
-  locale?: string
-  message?: string
-  actionText?: string
-  actionHref?: string
-}
-
-export default function EmptyCart({
-  locale = "ru",
-  message = "Your cart is empty",
-  actionText = "Start Shopping",
-  actionHref = "/",
-}: EmptyCartProps) {
-  return (
-    <div className="min-h-[400px] flex flex-col items-center justify-center p-4">
-      <ShoppingCart className="h-16 w-16 text-gray-300 mb-4" />
-      <h2 className="text-2xl font-semibold text-gray-600 mb-2">{message}</h2>
-      <p className="text-gray-500 mb-6 text-center max-w-sm">
-        {locale === "ru"
-          ? "Добавьте товары в корзину, чтобы начать покупки"
-          : "Add items to your cart to start shopping"}
-      </p>
-      <Link href={actionHref}>
-        <Button className="rounded-xl">{actionText}</Button>
-      </Link>
-    </div>
-  )
-}

components/empty-states/EmptyFavorites.tsx

@@ -1,32 +0,0 @@
-import { Heart } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import Link from "next/link"
-
-interface EmptyFavoritesProps {
-  locale?: string
-  message?: string
-  actionText?: string
-  actionHref?: string
-}
-
-export default function EmptyFavorites({
-  locale = "ru",
-  message = "No favorite items yet",
-  actionText = "Browse Products",
-  actionHref = "/",
-}: EmptyFavoritesProps) {
-  return (
-    <div className="min-h-[400px] flex flex-col items-center justify-center p-4">
-      <Heart className="h-16 w-16 text-gray-300 mb-4" />
-      <h2 className="text-2xl font-semibold text-gray-600 mb-2">{message}</h2>
-      <p className="text-gray-500 mb-6 text-center max-w-sm">
-        {locale === "ru"
-          ? "Сохраняйте понравившиеся товары, чтобы найти их позже"
-          : "Save items you love to find them later"}
-      </p>
-      <Link href={actionHref}>
-        <Button className="rounded-xl">{actionText}</Button>
-      </Link>
-    </div>
-  )
-}

components/empty-states/EmptyOrders.tsx

@@ -1,32 +0,0 @@
-import { Package } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import Link from "next/link"
-
-interface EmptyOrdersProps {
-  locale?: string
-  message?: string
-  actionText?: string
-  actionHref?: string
-}
-
-export default function EmptyOrders({
-  locale = "ru",
-  message = "No orders yet",
-  actionText = "Start Shopping",
-  actionHref = "/",
-}: EmptyOrdersProps) {
-  return (
-    <div className="min-h-[400px] flex flex-col items-center justify-center p-4">
-      <Package className="h-16 w-16 text-gray-300 mb-4" />
-      <h2 className="text-2xl font-semibold text-gray-600 mb-2">{message}</h2>
-      <p className="text-gray-500 mb-6 text-center max-w-sm">
-        {locale === "ru"
-          ? "У вас еще нет заказов. Начните покупки прямо сейчас!"
-          : "You haven't placed any orders yet. Start shopping now!"}
-      </p>
-      <Link href={actionHref}>
-        <Button className="rounded-xl">{actionText}</Button>
-      </Link>
-    </div>
-  )
-}

components/empty-states/EmptySearch.tsx

@@ -1,34 +0,0 @@
-import { Search } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import Link from "next/link"
-
-interface EmptySearchProps {
-  locale?: string
-  query?: string
-  message?: string
-  actionText?: string
-  actionHref?: string
-}
-
-export default function EmptySearch({
-  locale = "ru",
-  query = "",
-  message = "No results found",
-  actionText = "Back to Home",
-  actionHref = "/",
-}: EmptySearchProps) {
-  return (
-    <div className="min-h-[400px] flex flex-col items-center justify-center p-4">
-      <Search className="h-16 w-16 text-gray-300 mb-4" />
-      <h2 className="text-2xl font-semibold text-gray-600 mb-2">{message}</h2>
-      {query && (
-        <p className="text-gray-500 mb-6 text-center max-w-sm">
-          {locale === "ru" ? `No products found for "${query}"` : `No products found for "${query}"`}
-        </p>
-      )}
-      <Link href={actionHref}>
-        <Button className="rounded-xl">{actionText}</Button>
-      </Link>
-    </div>
-  )
-}

components/layout/Header.tsx

@@ -1,108 +1,64 @@
-"use client"
+"use client";
 
-import { useState, useEffect } from "react"
-import Link from "next/link"
-import Image from "next/image"
-import { X, Menu, Search, Store, LogOut, User as UserIcon } from "lucide-react"
-import { Button } from "@/components/ui/button"
+import { useState, useEffect, useCallback } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { X, Menu, Search, Store, LogOut, User as UserIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import Logo from "@/public/logo.png"
-import CategoryMenu from "./ui/CategoryMenu"
-import SearchBar from "./ui/SearchBar"
-import AuthDialog from "./ui/AuthDialog"
-import ActionButtons from "./ui/ActionButtons"
-import LanguageSelector from "./ui/LanguageSelector"
-import { useAuthStatus, useLogout } from "@/lib/hooks/useAuth"
+} from "@/components/ui/dropdown-menu";
+import Logo from "@/public/logo.png";
+import CategoryMenu from "./ui/CategoryMenu";
+import SearchBar from "./ui/SearchBar";
+import AuthDialog from "./ui/AuthDialog";
+import ActionButtons from "./ui/ActionButtons";
+import LanguageSelector from "./ui/LanguageSelector";
+import { useAuthStatus, useLogout } from "@/lib/hooks/useAuth";
+import { useTranslations } from "next-intl";
 
 interface HeaderProps {
-  locale?: string
-  translations?: {
-    catalog: string
-    search: string
-    orders: string
-    favorites: string
-    cart: string
-    login: string
-    profile: string
-    openStore: string
-    phone: string
-    code: string
-    send: string
-    verify: string
-    sending: string
-    verifying: string
-    enterPhone: string
-    weWillSendCode: string
-    invalidPhone: string
-    invalidCode: string
-    loginSuccess: string
-    codeSent: string
-    logout: string
-    loggingOut: string
-  }
+  locale?: string;
 }
 
-const DEFAULT_TRANSLATIONS = {
-  catalog: "Каталог",
-  search: "Поиск продукта",
-  orders: "Заказы",
-  favorites: "Избранное",
-  cart: "Корзина",
-  login: "Войти",
-  profile: "Профиль",
-  openStore: "Открыть магазин",
-  phone: "Номер телефона",
-  code: "Код",
-  send: "Отправить",
-  verify: "Подтвердить",
-  sending: "Отправка...",
-  verifying: "Проверка...",
-  enterPhone: "Введите свой номер телефона",
-  weWillSendCode: "Мы вышлем вам код",
-  invalidPhone: "Неверный номер телефона",
-  invalidCode: "Неверный код",
-  loginSuccess: "Вход выполнен успешно",
-  codeSent: "Код отправлен на ваш номер",
-  logout: "Выйти",
-  loggingOut: "Выход...",
-}
+export default function Header({ locale = "ru" }: HeaderProps) {
+  const [isClient, setIsClient] = useState(false);
+  const [isCategoryOpen, setIsCategoryOpen] = useState(false);
+  const [isMobileSearchOpen, setIsMobileSearchOpen] = useState(false);
+  const [isLoginOpen, setIsLoginOpen] = useState(false);
+  const t = useTranslations();
 
-export default function Header({ locale = "ru", translations }: HeaderProps) {
-  const [isClient, setIsClient] = useState(false)
-  const [isCategoryOpen, setIsCategoryOpen] = useState(false)
-  const [isMobileSearchOpen, setIsMobileSearchOpen] = useState(false)
-  const [isLoginOpen, setIsLoginOpen] = useState(false)
-
-  const t = { ...DEFAULT_TRANSLATIONS, ...translations }
-
-  const { isAuthenticated, isLoading } = useAuthStatus()
-  const { mutate: logout, isPending: isLoggingOut } = useLogout()
+  const { isAuthenticated, isLoading } = useAuthStatus();
+  const { mutate: logout, isPending: isLoggingOut } = useLogout();
 
   useEffect(() => {
-    setIsClient(true)
-  }, [])
+    setIsClient(true);
+  }, []);
 
-  const handleAuthClick = () => {
+  const handleAuthClick = useCallback(() => {
     if (isAuthenticated) {
-      window.location.href = `/${locale}/me`
+      window.location.href = `/${locale}/me`;
     } else {
-      setIsLoginOpen(true)
+      setIsLoginOpen(true);
     }
-  }
+  }, [isAuthenticated, locale]);
 
-  const handleLogout = () => {
-    logout()
-  }
+  const handleLogout = useCallback(() => {
+    logout();
+  }, [logout]);
 
-  const toggleCategoryMenu = () => setIsCategoryOpen(!isCategoryOpen)
-  const closeCategoryMenu = () => setIsCategoryOpen(false)
+  const toggleCategoryMenu = useCallback(() => {
+    setIsCategoryOpen((prev) => !prev);
+  }, []);
 
-  if (!isClient) return null
+  const closeCategoryMenu = useCallback(() => {
+    setIsCategoryOpen(false);
+  }, []);
+
+  if (!isClient) return null;
 
   return (
     <>
@@ -121,7 +77,7 @@ export default function Header({ locale = "ru", translations }: HeaderProps) {
               size="lg"
             >
               {isCategoryOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
-              {t.catalog}
+              {t("common.catalog")}
             </Button>
 
             <div className="flex items-center gap-2 sm:hidden">
@@ -135,55 +91,25 @@ export default function Header({ locale = "ru", translations }: HeaderProps) {
               <LanguageSelector />
             </div>
 
-            <SearchBar isMobile={false} searchPlaceholder={t.search} className="hidden flex-1 md:flex" />
+            <SearchBar
+              isMobile={false}
+              searchPlaceholder={t("common.search")}
+              className="hidden flex-1 md:flex"
+              locale={locale}
+            />
 
-            <div className="hidden md:flex items-center gap-2">
-              {isLoading ? (
-                <div className="h-10 w-24 animate-pulse bg-gray-200 rounded" />
-              ) : isAuthenticated ? (
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" size="sm" className="flex-col gap-0.5 h-auto px-2 py-2">
-                      <UserIcon className="h-5 w-5 text-gray-600" />
-                      <span className="text-xs text-gray-700">{t.profile}</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem onClick={() => (window.location.href = `/${locale}/me`)}>
-                      <UserIcon className="mr-2 h-4 w-4" />
-                      {t.profile}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={handleLogout} disabled={isLoggingOut}>
-                      <LogOut className="mr-2 h-4 w-4" />
-                      {isLoggingOut ? t.loggingOut : t.logout}
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              ) : (
-                <Button variant="ghost" size="sm" className="flex-col gap-0.5 h-auto px-2 py-2" onClick={handleAuthClick}>
-                  <UserIcon className="h-5 w-5 text-gray-600" />
-                  <span className="text-xs text-gray-700">{t.login}</span>
-                </Button>
-              )}
-            </div>
+           
 
             <ActionButtons
               isAuthenticated={isAuthenticated}
               onAuthClick={handleAuthClick}
-              translations={{
-                profile: t.profile,
-                login: t.login,
-                orders: t.orders,
-                favorites: t.favorites,
-                cart: t.cart,
-              }}
             />
           </div>
 
           <Link href="/openStore">
             <Button variant="ghost" size="sm" className="relative flex gap-0.5 h-auto pb-2">
               <Store className="h-5 w-5 text-gray-600" />
-              <span className="text-xs text-gray-700">{t.openStore}</span>
+              <span className="text-xs text-gray-700">{t("common.openStore")}</span>
             </Button>
           </Link>
         </div>
@@ -195,27 +121,14 @@ export default function Header({ locale = "ru", translations }: HeaderProps) {
         isMobile={true}
         isOpen={isMobileSearchOpen}
         onClose={() => setIsMobileSearchOpen(false)}
-        searchPlaceholder={t.search}
+        searchPlaceholder={t("common.search")}
+        locale={locale}
       />
 
       <AuthDialog
         isOpen={isLoginOpen}
         onClose={() => setIsLoginOpen(false)}
-        translations={{
-          enterPhone: t.enterPhone,
-          weWillSendCode: t.weWillSendCode,
-          phone: t.phone,
-          code: t.code,
-          send: t.send,
-          verify: t.verify,
-          sending: t.sending,
-          verifying: t.verifying,
-          invalidPhone: t.invalidPhone,
-          invalidCode: t.invalidCode,
-          loginSuccess: t.loginSuccess,
-          codeSent: t.codeSent,
-        }}
       />
     </>
-  )
+  );
 }

components/layout/ui/ActionButtons.tsx

@@ -1,75 +1,134 @@
-"use client"
+"use client";
 
-import type React from "react"
-import Link from "next/link"
-import { User, Truck, Heart, ShoppingCart } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { useCart, useFavorites, useOrders } from "@/lib/hooks"
-import { Skeleton } from "@/components/ui/skeleton"
+import { useMemo } from "react";
+import type React from "react";
+import Link from "next/link";
+import { User, Truck, Heart, ShoppingCart, LogOut } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useCart, useFavorites, useOrders } from "@/lib/hooks";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useTranslations } from "next-intl";
+import { useLogout } from "@/lib/hooks/useAuth";
 
 interface ActionButtonsProps {
-  isAuthenticated: boolean
-  onAuthClick: () => void
-  translations: {
-    profile: string
-    login: string
-    orders: string
-    favorites: string
-    cart: string
-  }
+  isAuthenticated: boolean;
+  onAuthClick: () => void;
+  isLoading?: boolean;
+  locale?: string;
 }
 
 interface ActionButtonData {
-  icon: React.ReactNode
-  label: string
-  href?: string
-  onClick?: () => void
-  badgeCount?: number
-  isLoading?: boolean
+  icon: React.ReactNode;
+  label: string;
+  href?: string;
+  onClick?: () => void;
+  badgeCount?: number;
+  isLoading?: boolean;
 }
 
-export default function ActionButtons({ isAuthenticated, onAuthClick, translations: t }: ActionButtonsProps) {
-  const { data: cartData, isLoading: cartLoading } = useCart()
-  const { data: favoritesData, isLoading: favoritesLoading } = useFavorites()
-  const { data: ordersData, isLoading: ordersLoading } = useOrders()
+export default function ActionButtons({ 
+  isAuthenticated, 
+  onAuthClick, 
+  isLoading: authLoading,
+  locale = "ru" 
+}: ActionButtonsProps) {
+  const t = useTranslations();
+  const { mutate: logout, isPending: isLoggingOut } = useLogout();
+  
+  const { data: cartData, isLoading: cartLoading } = useCart();
+  const { data: favoritesData, isLoading: favoritesLoading } = useFavorites();
+  const { data: ordersData, isLoading: ordersLoading } = useOrders();
 
-  const buttons: ActionButtonData[] = [
-    {
-      icon: <User className="h-5 w-5 text-gray-600" />,
-      label: isAuthenticated ? t.profile : t.login,
-      onClick: onAuthClick,
-    },
+  // Calculate cart count from cart items array
+  const cartCount = useMemo(() => {
+    if (!cartData?.data) return 0;
+    return cartData.data.length;
+  }, [cartData]);
+
+  // Calculate favorites count
+  const favoritesCount = useMemo(() => {
+    if (!favoritesData) return 0;
+    return Array.isArray(favoritesData) ? favoritesData.length : 0;
+  }, [favoritesData]);
+
+  // Calculate orders count
+  const ordersCount = useMemo(() => {
+    if (!ordersData) return 0;
+    return Array.isArray(ordersData) ? ordersData.length : 0;
+  }, [ordersData]);
+
+  const handleLogout = () => {
+    logout();
+  };
+
+  const buttons: ActionButtonData[] = useMemo(() => [
     {
       icon: <Truck className="h-5 w-5 text-gray-600" />,
-      label: t.orders,
+      label: t("common.orders"),
       href: "/orders",
-      badgeCount: ordersData?.length || 0,
+      badgeCount: ordersCount,
       isLoading: ordersLoading,
     },
     {
       icon: <Heart className="h-5 w-5 text-gray-600" />,
-      label: t.favorites,
+      label: t("common.favorites"),
       href: "/favorites",
-      badgeCount: favoritesData?.length || 0,
+      badgeCount: favoritesCount,
       isLoading: favoritesLoading,
     },
     {
       icon: <ShoppingCart className="h-5 w-5 text-gray-600" />,
-      label: t.cart,
+      label: t("common.cart"),
       href: "/cart",
-      badgeCount: cartData?.count || 0,
+      badgeCount: cartCount,
       isLoading: cartLoading,
     },
-  ]
+  ], [ordersCount, ordersLoading, favoritesCount, favoritesLoading, cartCount, cartLoading, t]);
 
   return (
     <div className="hidden items-center gap-1 md:flex">
+      {/* Profile/Login Button with Dropdown */}
+      {authLoading ? (
+        <div className="h-10 w-24 animate-pulse bg-gray-200 rounded" />
+      ) : isAuthenticated ? (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="flex-col gap-0.5 h-auto px-2 py-2">
+              <User className="h-5 w-5 text-gray-600" />
+              <span className="text-xs text-gray-700">{t("profile")}</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => (window.location.href = `/${locale}/me`)}>
+              <User className="mr-2 h-4 w-4" />
+              {t("profile")}
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={handleLogout} disabled={isLoggingOut}>
+              <LogOut className="mr-2 h-4 w-4" />
+              {isLoggingOut ? t("logging_out") : t("common.logout")}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : (
+        <Button variant="ghost" size="sm" className="flex-col gap-0.5 h-auto px-2 py-2" onClick={onAuthClick}>
+          <User className="h-5 w-5 text-gray-600" />
+          <span className="text-xs text-gray-700">{t("common.login")}</span>
+        </Button>
+      )}
+
+      {/* Other Action Buttons */}
       {buttons.map((button, index) => (
         <ActionButton key={index} {...button} />
       ))}
     </div>
-  )
+  );
 }
 
 function ActionButton({ icon, label, href, onClick, badgeCount, isLoading }: ActionButtonData) {
@@ -77,7 +136,7 @@ function ActionButton({ icon, label, href, onClick, badgeCount, isLoading }: Act
     <Button variant="ghost" size="sm" className="relative flex-col gap-0.5 h-auto px-2 py-2" onClick={onClick}>
       <div className="relative">
         {icon}
-        {badgeCount !== undefined && (
+        {badgeCount !== undefined && badgeCount > 0 && (
           <Badge
             variant="destructive"
             className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
@@ -88,11 +147,11 @@ function ActionButton({ icon, label, href, onClick, badgeCount, isLoading }: Act
       </div>
       <span className="text-xs text-gray-700">{label}</span>
     </Button>
-  )
+  );
 
   if (href) {
-    return <Link href={href}>{buttonContent}</Link>
+    return <Link href={href}>{buttonContent}</Link>;
   }
 
-  return buttonContent
-}
+  return buttonContent;
+}

components/layout/ui/AuthDialog.tsx

@@ -1,79 +1,67 @@
-"use client"
+"use client";
 
-import React, { useState } from "react"
-import Image from "next/image"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
-import { toast } from "sonner"
-import Logo from "@/public/logo.png"
-import { useLogin, useVerifyToken } from "@/lib/hooks/useAuth"
+import { useState, useCallback } from "react";
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { toast } from "sonner";
+import Logo from "@/public/logo.png";
+import { useLogin, useVerifyToken } from "@/lib/hooks/useAuth";
+import { useTranslations } from "next-intl";
 
 interface AuthDialogProps {
-  isOpen: boolean
-  onClose: () => void
-  translations: {
-    enterPhone: string
-    weWillSendCode: string
-    phone: string
-    code: string
-    send: string
-    verify: string
-    sending: string
-    verifying: string
-    invalidPhone: string
-    invalidCode: string
-    loginSuccess: string
-    codeSent: string
-  }
+  isOpen: boolean;
+  onClose: () => void;
 }
 
-export default function AuthDialog({ isOpen, onClose, translations: t }: AuthDialogProps) {
-  const [phone, setPhone] = useState("993")
-  const [otp, setOtp] = useState("")
-  const [otpSent, setOtpSent] = useState(false)
-  const [rawPhone, setRawPhone] = useState("")
+export default function AuthDialog({ isOpen, onClose }: AuthDialogProps) {
+  const [phone, setPhone] = useState("993");
+  const [otp, setOtp] = useState("");
+  const [otpSent, setOtpSent] = useState(false);
+  const [rawPhone, setRawPhone] = useState("");
+  const t = useTranslations();
 
-  const { mutate: login, isPending: isLoginLoading } = useLogin()
-  const { mutate: verifyToken, isPending: isVerifyLoading } = useVerifyToken()
+  const { mutate: login, isPending: isLoginLoading } = useLogin();
+  const { mutate: verifyToken, isPending: isVerifyLoading } = useVerifyToken();
 
-  const resetDialog = () => {
-    setOtpSent(false)
-    setPhone("993")
-    setOtp("")
-    setRawPhone("")
-    onClose()
-  }
+  const resetDialog = useCallback(() => {
+    setOtpSent(false);
+    setPhone("993");
+    setOtp("");
+    setRawPhone("");
+    onClose();
+  }, [onClose]);
 
-  const handleSendOtp = () => {
-    const cleanPhone = phone.replace(/\D/g, "")
+  const handleSendOtp = useCallback(() => {
+    const cleanPhone = phone.replace(/\D/g, "");
     
     if (cleanPhone.length !== 11 || !cleanPhone.startsWith("993")) {
-      toast.error(t.invalidPhone)
-      return
+      toast.error(t("invalid_phone"));
+      return;
     }
 
-    const phoneNumber = cleanPhone.substring(3)
-    setRawPhone(phoneNumber)
+    const phoneNumber = cleanPhone.substring(3);
+    setRawPhone(phoneNumber);
 
     login(
       { phone_number: phoneNumber },
       {
         onSuccess: () => {
-          toast.success(t.codeSent)
-          setOtpSent(true)
+          toast.success(t("code_sent"));
+          setOtpSent(true);
         },
         onError: (error: any) => {
-          toast.error(error?.response?.data?.message || "Hata oluştu")
+          toast.error(error?.response?.data?.message || t("error_occurred"));
         },
       }
-    )
-  }
+    );
+  }, [phone, login, t]);
 
-  const handleLogin = () => {
+  const handleLogin = useCallback(() => {
     if (otp.length < 4) {
-      toast.error(t.invalidCode)
-      return
+      toast.error(t("invalid_code"));
+      return;
     }
 
     verifyToken(
@@ -83,30 +71,30 @@ export default function AuthDialog({ isOpen, onClose, translations: t }: AuthDia
       },
       {
         onSuccess: () => {
-          toast.success(t.loginSuccess)
-          resetDialog()
-          window.location.reload()
+          toast.success(t("login_success"));
+          resetDialog();
+          window.location.reload();
         },
         onError: (error: any) => {
-          toast.error(error?.response?.data?.message || "Kod yanlış")
+          toast.error(error?.response?.data?.message || t("wrong_code"));
         },
       }
-    )
-  }
+    );
+  }, [otp, rawPhone, verifyToken, resetDialog, t]);
 
-  const handleKeyPress = (e: React.KeyboardEvent, action: () => void) => {
+  const handleKeyPress = useCallback((e: React.KeyboardEvent, action: () => void) => {
     if (e.key === "Enter") {
-      action()
+      action();
     }
-  }
+  }, []);
 
-  const formatPhoneInput = (value: string) => {
-    const cleaned = value.replace(/\D/g, "")
+  const formatPhoneInput = useCallback((value: string) => {
+    const cleaned = value.replace(/\D/g, "");
     if (!cleaned.startsWith("993")) {
-      return "993"
+      return "993";
     }
-    return cleaned.substring(0, 11)
-  }
+    return cleaned.substring(0, 11);
+  }, []);
 
   return (
     <Dialog open={isOpen} onOpenChange={resetDialog}>
@@ -117,15 +105,15 @@ export default function AuthDialog({ isOpen, onClose, translations: t }: AuthDia
               <Image src={Logo} alt="Logo" fill className="object-contain" />
             </div>
           </div>
-          <DialogTitle className="text-2xl text-center">{t.enterPhone}</DialogTitle>
-          <p className="text-center text-sm text-gray-600">{t.weWillSendCode}</p>
+          <DialogTitle className="text-2xl text-center">{t("common.enterPhone")}</DialogTitle>
+          <p className="text-center text-sm text-gray-600">{t("common.weWillSendCode")}</p>
         </DialogHeader>
 
         <div className="space-y-4 mt-4">
           <div>
             <Input
               type="tel"
-              placeholder={t.phone}
+              placeholder={t("common.phone")}
               value={phone}
               onChange={(e) => setPhone(formatPhoneInput(e.target.value))}
               className="h-12 rounded-xl"
@@ -133,13 +121,13 @@ export default function AuthDialog({ isOpen, onClose, translations: t }: AuthDia
               disabled={otpSent || isLoginLoading}
               maxLength={11}
             />
-            <p className="text-xs text-gray-500 mt-1">Format: 99365123456</p>
+            <p className="text-xs text-gray-500 mt-1">{t("phone_format")}</p>
           </div>
 
           {otpSent && (
             <Input
               type="text"
-              placeholder={t.code}
+              placeholder={t("common.code")}
               value={otp}
               onChange={(e) => setOtp(e.target.value.replace(/\D/g, "").substring(0, 6))}
               className="h-12 rounded-xl"
@@ -157,15 +145,15 @@ export default function AuthDialog({ isOpen, onClose, translations: t }: AuthDia
             disabled={isLoginLoading || isVerifyLoading}
           >
             {isLoginLoading
-              ? t.sending
+              ? t("sending")
               : isVerifyLoading
-                ? t.verifying
+                ? t("verifying")
                 : otpSent
-                  ? t.verify
-                  : t.send}
+                  ? t("verify")
+                  : t("common.send")}
           </Button>
         </div>
       </DialogContent>
     </Dialog>
-  )
+  );
 }

components/layout/ui/CategoryMenu.tsx

@@ -5,13 +5,7 @@ import Link from "next/link"
 import { useCategories } from "@/lib/hooks"
 import { Skeleton } from "@/components/ui/skeleton"
 
-interface Category {
-  id: number
-  name: string
-  slug: string
-  icon_class?: string
-  children?: Category[]
-}
+
 
 interface CategoryMenuProps {
   isOpen: boolean

components/layout/ui/SearchBar.tsx

@@ -1,5 +1,7 @@
-import React, { useState } from "react";
-import { Search } from "lucide-react";
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import { Search, X, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -8,6 +10,9 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { useRouter } from "next/navigation";
+import { useSearchProducts } from "@/features/search/hooks/useSearch";
+import Image from "next/image";
 
 interface SearchBarProps {
   isMobile: boolean;
@@ -15,6 +20,7 @@ interface SearchBarProps {
   isOpen?: boolean;
   onClose?: () => void;
   className?: string;
+  locale?: string;
 }
 
 export default function SearchBar({
@@ -23,12 +29,89 @@ export default function SearchBar({
   isOpen,
   onClose,
   className = "",
+  locale = "ru",
 }: 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);
+    }
+  }, [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 handleSearch = (value: string) => {
     setSearchValue(value);
-    // Here you can add search logic or API call
+  };
+
+  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 rounded-xl shadow-lg max-h-[400px] overflow-y-auto z-50">
+        {data.data.map((product) => (
+          <button
+            key={product.id}
+            onClick={() => handleProductClick(product.id)}
+            className="w-full flex items-center gap-3 p-3 hover:bg-gray-50 transition-colors border-b last:border-b-0"
+          >
+            <div className="relative w-16 h-16 flex-shrink-0">
+              <Image
+                src={product.thumbnail}
+                alt={product.name}
+                fill
+                className="object-cover rounded-lg"
+              />
+            </div>
+            <div className="flex-1 text-left">
+              <p className="font-medium text-sm line-clamp-2">{product.name}</p>
+              <p className="text-sm text-gray-600 mt-1">
+                {product.price_amount} TMT
+              </p>
+              <p className="text-xs text-gray-500">{product.brand.name}</p>
+            </div>
+          </button>
+        ))}
+      </div>
+    );
   };
 
   if (isMobile) {
@@ -38,15 +121,19 @@ export default function SearchBar({
           <DialogHeader>
             <DialogTitle>{searchPlaceholder}</DialogTitle>
           </DialogHeader>
-          <div className="relative">
+          <div className="relative" ref={searchRef}>
             <Input
-              type="search"
+              type="text"
               placeholder={searchPlaceholder}
               value={searchValue}
               onChange={(e) => handleSearch(e.target.value)}
               className="h-10 rounded-xl focus:border-[#005bff] focus-visible:border-[#005bff] focus-visible:ring-0 active:border-[#005bff]"
               autoFocus
             />
+            {isLoading && (
+              <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-gray-400" />
+            )}
+            <SearchResults />
           </div>
         </DialogContent>
       </Dialog>
@@ -54,15 +141,18 @@ export default function SearchBar({
   }
 
   return (
-    <div className={`bg-[#005bff] rounded-xl ${className}`}>
-      <div className="w-full">
+    <div className={`bg-[#005bff] rounded-xl flex items-center relative ${className}`} ref={searchRef}>
+      <div className="w-full relative">
         <Input
-          type="search"
+          type="text"
           placeholder={searchPlaceholder}
           value={searchValue}
           onChange={(e) => handleSearch(e.target.value)}
           className="border-[#005bff] w-full rounded-xl border-2 focus-visible:ring-0 bg-white px-2"
         />
+        {isLoading && (
+          <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-gray-400" />
+        )}
       </div>
       <Button
         size="icon"
@@ -70,6 +160,7 @@ export default function SearchBar({
       >
         <Search className="h-5 w-5" />
       </Button>
+      <SearchResults />
     </div>
   );
 }

components/skeletons/CartItemSkeleton.tsx

@@ -1,27 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton"
-import { Card } from "@/components/ui/card"
-
-export default function CartItemSkeleton() {
-  return (
-    <Card className="p-4 rounded-xl">
-      <div className="flex gap-4">
-        {/* Product Image */}
-        <Skeleton className="w-24 h-24 rounded-lg flex-shrink-0 bg-gray-200" />
-
-        {/* Product Info */}
-        <div className="flex-1 space-y-2">
-          <Skeleton className="h-4 w-3/4 bg-gray-200" />
-          <Skeleton className="h-4 w-1/2 bg-gray-200" />
-          <Skeleton className="h-6 w-20 bg-gray-200 mt-2" />
-        </div>
-
-        {/* Quantity Controls */}
-        <div className="flex items-center gap-2">
-          <Skeleton className="w-8 h-8 rounded-lg bg-gray-200" />
-          <Skeleton className="w-8 h-8 bg-gray-200" />
-          <Skeleton className="w-8 h-8 rounded-lg bg-gray-200" />
-        </div>
-      </div>
-    </Card>
-  )
-}

components/skeletons/CategorySkeleton.tsx

@@ -1,17 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton"
-import { Card } from "@/components/ui/card"
-import { CardContent } from "@/components/ui/card"
-
-export default function CategorySkeleton() {
-  return (
-    <Card className="overflow-hidden rounded-xl">
-      {/* Image */}
-      <Skeleton className="w-full h-36 bg-gray-200" />
-
-      {/* Name */}
-      <CardContent className="py-2">
-        <Skeleton className="h-4 w-3/4 bg-gray-200" />
-      </CardContent>
-    </Card>
-  )
-}

components/skeletons/HomeSkeleton.tsx

@@ -1,30 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton"
-import ProductGridSkeleton from "./ProductGridSkeleton"
-import CategorySkeleton from "./CategorySkeleton"
-
-export default function HomeSkeleton() {
-  return (
-    <div className="px-4 md:px-8 lg:px-12 pt-8 pb-12 space-y-8">
-      {/* Hero Carousel Skeleton */}
-      <section className="rounded-2xl overflow-hidden">
-        <Skeleton className="w-full h-[200px] sm:h-[300px] md:h-[420px] bg-gray-200" />
-      </section>
-
-      {/* Categories Section Skeleton */}
-      <section className="bg-white rounded-2xl shadow-sm p-6">
-        <Skeleton className="h-6 w-32 mb-4 bg-gray-200" />
-        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
-          {Array.from({ length: 6 }).map((_, i) => (
-            <CategorySkeleton key={i} />
-          ))}
-        </div>
-      </section>
-
-      {/* Products Section Skeleton */}
-      <section className="bg-white rounded-2xl shadow-sm p-6">
-        <Skeleton className="h-6 w-32 mb-4 bg-gray-200" />
-        <ProductGridSkeleton count={10} columns="5" />
-      </section>
-    </div>
-  )
-}

components/skeletons/PageLoader.tsx

@@ -1,129 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton"
-import ProductGridSkeleton from "./ProductGridSkeleton"
-import CartItemSkeleton from "./CartItemSkeleton" // Added import for CartItemSkeleton
-
-interface PageLoaderProps {
-  /**
-   * Type of page loading skeleton
-   * home, products, category, search, cart, favorites, orders, profile
-   */
-  type?: "home" | "products" | "category" | "search" | "cart" | "favorites" | "orders" | "profile"
-}
-
-export default function PageLoader({ type = "products" }: PageLoaderProps) {
-  switch (type) {
-    case "home":
-      return (
-        <div className="px-4 md:px-8 lg:px-12 pt-8 pb-12 space-y-8">
-          {/* Hero Banner */}
-          <Skeleton className="w-full h-[300px] rounded-2xl bg-gray-200" />
-
-          {/* Categories */}
-          <div className="space-y-4">
-            <Skeleton className="h-6 w-32 bg-gray-200" />
-            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
-              {Array.from({ length: 6 }).map((_, i) => (
-                <Skeleton key={i} className="aspect-square bg-gray-200 rounded-xl" />
-              ))}
-            </div>
-          </div>
-
-          {/* Products */}
-          <div className="space-y-4">
-            <Skeleton className="h-6 w-32 bg-gray-200" />
-            <ProductGridSkeleton count={8} columns="5" />
-          </div>
-        </div>
-      )
-
-    case "products":
-    case "search":
-      return (
-        <div className="px-4 md:px-8 lg:px-12 py-8">
-          <div className="space-y-4 mb-6">
-            <Skeleton className="h-8 w-40 bg-gray-200" />
-          </div>
-          <ProductGridSkeleton count={12} columns="5" />
-        </div>
-      )
-
-    case "category":
-      return (
-        <div className="container mx-auto px-4 py-8">
-          <div className="flex gap-6">
-            {/* Filters Sidebar */}
-            <div className="hidden sm:block w-[280px] space-y-6">
-              {Array.from({ length: 3 }).map((_, i) => (
-                <div key={i} className="space-y-2">
-                  <Skeleton className="h-5 w-24 bg-gray-200" />
-                  <Skeleton className="h-4 w-full bg-gray-200" />
-                  <Skeleton className="h-4 w-full bg-gray-200" />
-                  <Skeleton className="h-4 w-3/4 bg-gray-200" />
-                </div>
-              ))}
-            </div>
-
-            {/* Products */}
-            <div className="flex-1">
-              <ProductGridSkeleton count={12} columns="5" />
-            </div>
-          </div>
-        </div>
-      )
-
-    case "cart":
-      return (
-        <div className="container mx-auto px-4 py-8">
-          <Skeleton className="h-8 w-40 mb-6 bg-gray-200" />
-          <div className="flex flex-col md:flex-row gap-6">
-            <div className="flex-1 space-y-4">
-              {Array.from({ length: 3 }).map((_, i) => (
-                <CartItemSkeleton key={i} />
-              ))}
-            </div>
-            {/* Order Summary */}
-            <div className="lg:w-[420px]">
-              <div className="space-y-4 bg-gray-50 p-6 rounded-xl">
-                {Array.from({ length: 6 }).map((_, i) => (
-                  <Skeleton key={i} className="h-4 w-full bg-gray-200" />
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-      )
-
-    case "orders":
-    case "favorites":
-      return (
-        <div className="container mx-auto px-4 py-8">
-          <Skeleton className="h-8 w-40 mb-6 bg-gray-200" />
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {Array.from({ length: 6 }).map((_, i) => (
-              <Skeleton key={i} className="h-64 w-full bg-gray-200 rounded-xl" />
-            ))}
-          </div>
-        </div>
-      )
-
-    case "profile":
-      return (
-        <div className="min-h-screen bg-gray-50 p-4 pt-20">
-          <div className="container mx-auto max-w-2xl">
-            <Skeleton className="h-8 w-40 mb-6 bg-gray-200" />
-            <div className="bg-white p-6 rounded-xl space-y-4">
-              {Array.from({ length: 5 }).map((_, i) => (
-                <div key={i} className="space-y-2">
-                  <Skeleton className="h-4 w-32 bg-gray-200" />
-                  <Skeleton className="h-10 w-full bg-gray-200 rounded-lg" />
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      )
-
-    default:
-      return <ProductGridSkeleton count={12} columns="5" />
-  }
-}

components/skeletons/ProductCardSkeleton.tsx

@@ -1,23 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton"
-import { Card } from "@/components/ui/card"
-
-export default function ProductCardSkeleton() {
-  return (
-    <Card className="overflow-hidden rounded-xl">
-      {/* Image Skeleton */}
-      <Skeleton className="aspect-square w-full bg-gray-200" />
-
-      {/* Content Skeleton */}
-      <div className="p-3 space-y-3">
-        {/* Title skeleton - 2 lines */}
-        <div className="space-y-2">
-          <Skeleton className="h-4 w-full bg-gray-200" />
-          <Skeleton className="h-4 w-3/4 bg-gray-200" />
-        </div>
-
-        {/* Price skeleton */}
-        <Skeleton className="h-6 w-1/2 bg-gray-200" />
-      </div>
-    </Card>
-  )
-}

components/skeletons/ProductGridSkeleton.tsx

@@ -1,24 +0,0 @@
-import ProductCardSkeleton from "./ProductCardSkeleton"
-
-interface ProductGridSkeletonProps {
-  count?: number
-  columns?: "2" | "3" | "4" | "5"
-}
-
-export default function ProductGridSkeleton({ count = 8, columns = "4" }: ProductGridSkeletonProps) {
-  const gridClass =
-    {
-      "2": "grid-cols-2",
-      "3": "md:grid-cols-3",
-      "4": "md:grid-cols-4 lg:grid-cols-4",
-      "5": "md:grid-cols-4 xl:grid-cols-5",
-    }[columns] || "md:grid-cols-4"
-
-  return (
-    <div className={`grid grid-cols-2 sm:grid-cols-3 ${gridClass} gap-4`}>
-      {Array.from({ length: count }).map((_, i) => (
-        <ProductCardSkeleton key={i} />
-      ))}
-    </div>
-  )
-}