fixed some bugs

2026-02-05 19:36:12 +05:00
parent c68ac335c6
commit f32e7538e1
20 changed files with 1476 additions and 734 deletions
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -54,10 +54,14 @@ export default function Header({ locale = "ru" }: HeaderProps) {

  return (
    <>
-      <header className="sticky top-0 z-50 w-full border-b bg-white shadow-sm">
-        <div className="mx-auto px-4">
-          <div className="flex h-16 items-center justify-between gap-3">
-            <Link href="/" className="shrink-0">
+      <header className="sticky top-0 z-50 w-full border-b border-gray-200 bg-white/95 backdrop-blur-md shadow-sm ">
+        <div className="mx-auto px-4 lg:px-6 max-w-[1520px]">
+          <div className="flex h-16 items-center justify-between gap-2 lg:gap-3">
+            {/* Logo */}
+            <Link
+              href="/"
+              className="shrink-0 transition-opacity hover:opacity-80"
+            >
              <div className="relative h-8 w-[180px]">
                <Image
                  src={Logo}
@@ -69,38 +73,44 @@ export default function Header({ locale = "ru" }: HeaderProps) {
              </div>
            </Link>

+            {/* Catalog Button - Desktop */}
            <Button
              data-catalog-trigger
              onClick={toggleCategoryMenu}
-              className="cursor-pointer hidden gap-2 rounded-lg font-bold lg:flex hover:bg-[#005bff] bg-[#005bff] text-white"
+              className="cursor-pointer hidden gap-2.5 font-semibold lg:flex hover:bg-gray-800 bg-gray-900 text-white transition-all duration-200 shadow-sm hover:shadow-md"
              size="lg"
            >
              {isCategoryOpen ? <X className="h-5 w-5" /> : <CategoryIcon />}
              {t("common.catalog")}
            </Button>

-            <div className="flex items-center gap-2 sm:hidden cursor-pointer">
+            {/* Mobile Search & Language */}
+            <div className="flex items-center gap-2 sm:hidden">
              <Button
                variant="ghost"
                size="icon"
                onClick={() => setIsMobileSearchOpen(true)}
+                className="hover:bg-gray-100 rounded-lg transition-colors"
              >
-                <Search className="h-5 w-5" />
+                <Search className="h-5 w-5 text-gray-700" />
              </Button>
              <LanguageSelector />
            </div>

+            {/* Desktop Language Selector */}
            <div className="hidden sm:block">
              <LanguageSelector />
            </div>

+            {/* Desktop Search Bar */}
            <SearchBar
              isMobile={false}
              searchPlaceholder={t("common.search")}
-              className="hidden flex-1 md:flex"
+              className="hidden flex-1 md:flex "
              locale={locale}
            />

+            {/* Action Buttons */}
            <ActionButtons
              isAuthenticated={isAuthenticated}
              onAuthClick={handleAuthClick}
--- a/components/layout/ui/ActionButtons.tsx
+++ b/components/layout/ui/ActionButtons.tsx
@@ -9,11 +9,7 @@ import { useCart, useFavorites, useOrders, useCartCount } from "@/lib/hooks";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useTranslations } from "next-intl";
 import { useLogout } from "@/lib/hooks/useAuth";
-import {
-  CartIcon,
-  FavoriteIcon,
-  OrderIcon,
-} from "@/components/icons";
+import { CartIcon, FavoriteIcon, OrderIcon } from "@/components/icons";

 interface ActionButtonsProps {
  isAuthenticated: boolean;
@@ -44,27 +40,24 @@ export default function ActionButtons({
  const { data: favoritesData, isLoading: favoritesLoading } = useFavorites();
  const { data: ordersData, isLoading: ordersLoading } = useOrders();

-  // Calculate cart count from cart items array
-const cartCount = useCartCount()
+  const cartCount = useCartCount();

-  // 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 = () => {
+  const handleLogout = () => {
    logout(undefined, {
      onSuccess: () => {
        router.push(`/${locale}`);
-        router.refresh(); 
-      }
+        router.refresh();
+      },
    });
  };

@@ -100,50 +93,11 @@ const cartCount = useCartCount()
      cartCount,
      cartLoading,
      t,
-    ]
+    ],
  );

  return (
    <div className="hidden items-center gap-1 lg: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 cursor-pointer gap-0.5 h-auto px-2 py-2"
-            >
-              <ProfileIcon />
-              <span className="text-xs text-gray-700">{t("profile")}</span>
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={() => router.push(`/${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 cursor-pointer gap-0.5 h-auto px-2 py-2"
-          onClick={onAuthClick}
-        >
-          <ProfileIcon />
-          <span className="text-xs text-gray-700">{t("common.login")}</span>
-        </Button>
-      )} */}
-
-      {/* Other Action Buttons */}
      {buttons.map((button, index) => (
        <ActionButton key={index} {...button} />
      ))}
@@ -163,25 +117,28 @@ function ActionButton({
    <Button
      variant="ghost"
      size="sm"
-      className="relative flex-col gap-0.5 h-auto px-2 py-2"
+      className="relative 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">
-        {icon}
+        <div className="transition-transform duration-200 group-hover:scale-110">
+          {icon}
+        </div>
        {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]"
-          >
+          <Badge className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px] font-normal bg-gray-900 hover:bg-gray-900 text-white border border-white shadow-sm">
            {isLoading ? (
-              <Skeleton className="h-3 w-3 rounded-full" />
+              <Skeleton className="h-3 w-3 " />
+            ) : badgeCount > 99 ? (
+              "99+"
            ) : (
              badgeCount
            )}
          </Badge>
        )}
      </div>
-      <span className="text-xs text-gray-700">{label}</span>
+      <span className="text-xs  text-gray-700 group-hover:text-gray-900 transition-colors">
+        {label}
+      </span>
    </Button>
  );

--- a/components/layout/ui/CategoryMenu.tsx
+++ b/components/layout/ui/CategoryMenu.tsx
@@ -5,6 +5,7 @@ import { useState, useEffect, useRef } from "react";
 import Link from "next/link";
 import { useCategories } from "@/lib/hooks";
 import { Skeleton } from "@/components/ui/skeleton";
+import { ChevronRight } from "lucide-react";

 interface CategoryMenuProps {
  isOpen: boolean;
@@ -16,25 +17,21 @@ export default function CategoryMenu({ isOpen, onClose }: CategoryMenuProps) {
  const { data: categories, isLoading } = useCategories();
  const menuRef = useRef<HTMLDivElement>(null);

-  // Click outside to close
  useEffect(() => {
    if (!isOpen) return;

    const handleClickOutside = (event: MouseEvent) => {
      const target = event.target as HTMLElement;

-      
      if (target.closest("[data-catalog-trigger]")) {
        return;
      }

-    
      if (menuRef.current && !menuRef.current.contains(target)) {
        onClose();
      }
    };

-    // Add listener after a small delay to prevent immediate closing
    const timeoutId = setTimeout(() => {
      document.addEventListener("mousedown", handleClickOutside);
    }, 100);
@@ -45,7 +42,6 @@ export default function CategoryMenu({ isOpen, onClose }: CategoryMenuProps) {
    };
  }, [isOpen, onClose]);

-  // ESC key to close
  useEffect(() => {
    if (!isOpen) return;

@@ -67,20 +63,25 @@ export default function CategoryMenu({ isOpen, onClose }: CategoryMenuProps) {

  return (
    <>
-      <div className="fixed inset-0 bg-black/20 z-30" onClick={onClose} />
+      {/* Overlay */}
+      <div
+        className="fixed inset-0 bg-black/30 backdrop-blur-sm z-30 animate-fade-in"
+        onClick={onClose}
+      />

      {/* Menu */}
      <div
        ref={menuRef}
-        className="fixed left-0 right-0 top-16 z-40 bg-white border-b rounded-b-lg shadow-lg max-w-[1504px] mx-auto"
+        className="fixed left-0 right-0 top-16 z-40 bg-white border-b border-gray-200 rounded-b-lg shadow-2xl max-w-[1600px] mx-auto animate-slide-up"
      >
-        <div className="mx-auto px-4">
+        <div className="mx-auto px-6">
          <div className="flex">
            <CategoryList
              categories={categoryList}
              isLoading={isLoading}
              onCategoryHover={setHoveredCategory}
              onCategoryClick={onClose}
+              hoveredIndex={hoveredCategory}
            />

            {activeCategory?.children && (
@@ -101,6 +102,7 @@ interface CategoryListProps {
  isLoading: boolean;
  onCategoryHover: (index: number) => void;
  onCategoryClick: () => void;
+  hoveredIndex: number | null;
 }

 function CategoryList({
@@ -108,13 +110,16 @@ function CategoryList({
  isLoading,
  onCategoryHover,
  onCategoryClick,
+  hoveredIndex,
 }: CategoryListProps) {
  return (
-    <div className="w-[280px] border-r">
-      <div className="max-h-[calc(100vh-4rem)] overflow-y-auto py-2">
+    <div className="w-[300px] border-r border-gray-200">
+      <div className="max-h-[calc(100vh-5rem)] overflow-y-auto py-3">
        {isLoading
-          ? [1, 2, 3, 4, 5].map((i) => (
-              <Skeleton key={i} className="h-10 mx-4 my-2 rounded" />
+          ? Array.from({ length: 8 }).map((_, i) => (
+              <div key={i} className="mx-4 my-2">
+                <Skeleton className="h-12 rounded-lg" />
+              </div>
            ))
          : categories.map((category, index) => (
              <Link
@@ -122,12 +127,31 @@ function CategoryList({
                href={`/category/${category.slug}?category_id=${category.id}`}
                onClick={onCategoryClick}
                onMouseEnter={() => onCategoryHover(index)}
-                className="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-100 hover:text-primary transition-colors"
+                className={`flex items-center justify-between gap-3 mx-2 px-4 py-3.5 rounded-lg transition-all duration-200 group ${
+                  hoveredIndex === index
+                    ? "bg-gray-900 text-white shadow-md"
+                    : "hover:bg-gray-100 text-gray-900"
+                }`}
              >
-                {category.icon_class && (
-                  <i className={`${category.icon_class} text-xl`} />
+                <div className="flex items-center gap-3">
+                  {category.icon_class && (
+                    <i
+                      className={`${category.icon_class} text-xl ${
+                        hoveredIndex === index ? "text-white" : "text-gray-700"
+                      }`}
+                    />
+                  )}
+                  <span className="font-medium">{category.name}</span>
+                </div>
+                {category.children && category.children.length > 0 && (
+                  <ChevronRight
+                    className={`h-4 w-4 transition-all duration-200 ${
+                      hoveredIndex === index
+                        ? "text-white translate-x-0.5"
+                        : "text-gray-400 group-hover:text-gray-700"
+                    }`}
+                  />
                )}
-                <span>{category.name}</span>
              </Link>
            ))}
      </div>
@@ -145,17 +169,24 @@ function SubcategoryList({
  onSubcategoryClick,
 }: SubcategoryListProps) {
  return (
-    <div className="flex-1 p-6">
-      <h3 className="text-xl font-semibold mb-4">{category.name}</h3>
-      <div className="grid grid-cols-3 gap-4">
+    <div className="flex-1 p-8 animate-fade-in">
+      <div className="mb-6">
+        <h3 className="text-2xl font-bold text-gray-900 mb-2">
+          {category.name}
+        </h3>
+        <div className="h-1 w-32 bg-gray-900 rounded-full" />
+      </div>
+
+      <div className="grid grid-cols-3 gap-x-6 gap-y-3">
        {category.children?.map((subCategory: any) => (
          <Link
            key={subCategory.id}
            href={`/category/${subCategory.slug}?category_id=${subCategory.id}`}
            onClick={onSubcategoryClick}
-            className="text-gray-600 hover:text-black text-sm py-1 hover:underline"
+            className="text-gray-700 hover:text-gray-900 text-sm py-2 px-3 hover:bg-gray-50 transition-all duration-200 font-medium group flex items-center gap-2"
          >
-            {subCategory.name}
+            <span className="flex-1">{subCategory.name}</span>
+            <ChevronRight className="h-3.5 w-3.5 text-gray-400 opacity-0 group-hover:opacity-100 transition-all duration-200 -translate-x-1 group-hover:translate-x-0" />
          </Link>
        ))}
      </div>
--- a/components/layout/ui/LanguageSelector.tsx
+++ b/components/layout/ui/LanguageSelector.tsx
@@ -43,17 +43,21 @@ export default function LanguageSelector() {

  return (
    <Select value={locale} onValueChange={handleLanguageChange}>
-      <SelectTrigger className="w-[70px] md:h-10! flex items-center justify-center rounded-lg border-gray-300">
+      <SelectTrigger className="w-[70px] h-10! flex items-center justify-center  border-gray-200 hover:border-gray-900 hover:bg-gray-50 transition-all duration-200 shadow-sm">
        <SelectValue>
          <FlagIcon locale={locale} />
        </SelectValue>
      </SelectTrigger>
-      <SelectContent>
+      <SelectContent className=" border-gray-200 shadow-lg">
        {LANGUAGES.map((language) => (
-          <SelectItem key={language.code} value={language.code}>
-            <div className="flex items-center gap-2">
+          <SelectItem
+            key={language.code}
+            value={language.code}
+            className="rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
+          >
+            <div className="flex items-center gap-3">
              <FlagIcon locale={language.code} />
-              <span>{language.name}</span>
+              <span className="font-medium">{language.name}</span>
            </div>
          </SelectItem>
        ))}
@@ -68,12 +72,12 @@ function FlagIcon({ locale }: { locale: string }) {
  if (!language) return null;

  return (
-    <div className="relative h-5 w-7">
+    <div className="relative h-5 w-7  overflow-hidden shadow-sm">
      <Image
        src={language.flag || "/placeholder.svg"}
        alt={language.name}
        fill
-        className="object-cover rounded"
+        className="object-cover"
      />
    </div>
  );
--- a/components/layout/ui/SearchBar.tsx
+++ b/components/layout/ui/SearchBar.tsx
@@ -87,30 +87,38 @@ export default function SearchBar({
    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 cursor-pointer 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 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 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>
    );
  };
@@ -118,22 +126,27 @@ export default function SearchBar({
  if (isMobile) {
    return (
      <Dialog open={isOpen} onOpenChange={onClose}>
-        <DialogContent className="top-4 translate-y-0">
+        <DialogContent className="top-4 translate-y-0 rounded-lg border-gray-200">
          <DialogHeader>
-            <DialogTitle>{searchPlaceholder}</DialogTitle>
+            <DialogTitle className="text-xl font-bold">
+              {searchPlaceholder}
+            </DialogTitle>
          </DialogHeader>
          <div className="relative" ref={searchRef}>
-            <Input
-              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" />
-            )}
+            <div className="relative">
+              <Input
+                type="text"
+                placeholder={searchPlaceholder}
+                value={searchValue}
+                onChange={(e) => handleSearch(e.target.value)}
+                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" />
+              )}
+            </div>
            <SearchResults />
          </div>
        </DialogContent>
@@ -142,26 +155,32 @@ export default function SearchBar({
  }

  return (
-    <div className={`bg-[#005bff] rounded-xl flex items-center relative ${className}`} ref={searchRef}>
+    <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">
-        <Input
-          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"
-        />
+        <div className="relative">
+          <Input
+            type="text"
+            placeholder={searchPlaceholder}
+            value={searchValue}
+            onChange={(e) => handleSearch(e.target.value)}
+            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-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-gray-400" />
+          <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"
-        className="h-auto  hover:bg-[#005bff] cursor-pointer bg-transparent flex items-center mr-1.5 text-white"
+        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>
  );
-}
+}