added collection page

2025-12-15 14:33:34 +05:00
parent 633a3c9d47
commit e886359c5c
31 changed files with 2118 additions and 716 deletions
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -81,7 +81,7 @@ export default function Header({ locale = "ru" }: HeaderProps) {

            <Button
              onClick={toggleCategoryMenu}
-              className="hidden gap-2 rounded-xl font-bold sm:flex hover:bg-[#005bff] bg-[#005bff] text-white"
+              className="hidden gap-2 rounded-lg font-bold sm:flex hover:bg-[#005bff] bg-[#005bff] text-white"
              size="lg"
            >
              {isCategoryOpen ? <X className="h-5 w-5" /> : <CategoryIcon />}
@@ -131,19 +131,10 @@ export default function Header({ locale = "ru" }: HeaderProps) {
      <AuthDialog isOpen={isLoginOpen} onClose={() => setIsLoginOpen(false)} />

      <MobileBottomNav
-        locale={locale}
-        isAuthenticated={isAuthenticated}
-        translations={{
-          catalog: t("common.catalog"),
-          favorites: t("common.favorites"),
-          orders: t("common.orders"),
-          cart: t("common.cart"),
-          login: t("common.login"),
-          profile: t("profile"),
-        }}
-        onLoginClick={() => setIsLoginOpen(true)}
-        onProfileClick={handleProfileClick}
-      />
+  locale={locale}
+ 
+  onLoginClick={() => setIsLoginOpen(true)}
+/>
    </>
  );
 }
--- a/components/layout/MobileBar.tsx
+++ b/components/layout/MobileBar.tsx
@@ -14,9 +14,10 @@ import {
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { useCategories, useCart, useFavorites, useOrders } from "@/lib/hooks";
 import { useRouter } from "next/navigation";
+import { useAuthStatus } from "@/lib/hooks/useAuth";
+import { useTranslations } from "next-intl";
 interface MobileBottomNavProps {
  locale?: string;
-  isAuthenticated?: boolean;
  translations?: {
    catalog: string;
    favorites: string;
@@ -26,48 +27,56 @@ interface MobileBottomNavProps {
    profile: string;
  };
  onLoginClick?: () => void;
-  onProfileClick?: () => void;
 }

 export default function MobileBottomNav({
  locale = "ru",
-  isAuthenticated = false,
  translations,
  onLoginClick,
-  onProfileClick, // EKLENEN
 }: MobileBottomNavProps) {
  const [isClient, setIsClient] = useState(false);
  const [isCategoryOpen, setIsCategoryOpen] = useState(false);
-
+ const t = useTranslations();
+  // AUTH STATE DIRECTLY FROM HOOK - NOT FROM PROPS
+  const { isAuthenticated, isLoading: authLoading } = useAuthStatus();
+  
  const { data: categories = [] } = useCategories();
  const { data: cartData } = useCart();
  const { data: favoritesData } = useFavorites();
  const { data: ordersData } = useOrders();
  const router = useRouter();
-  const t = translations || {
-    catalog: "Каталог",
-    favorites: "Избранное",
-    orders: "Заказы",
-    cart: "Корзина",
-    login: "Войти",
-    profile: "Профиль",
-  };
+
+  

  useEffect(() => {
    setIsClient(true);
  }, []);

-  const handleAuthClick = () => {
-    if (isAuthenticated) {
-      if (onProfileClick) {
-        onProfileClick();
-      } else {
-        router.push(`/${locale}/me`);
-        console.log("hello");
-      }
-    } else if (onLoginClick) {
-      onLoginClick();
+
+
+  const handleProfileClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    
+
+    if (authLoading) {
+      return;
    }
+
+    if (isAuthenticated) {
+      router.push(`/${locale}/me`);
+    } else {
+      if (onLoginClick) {
+        onLoginClick();
+      }
+    }
+  };
+
+  const handleNavigation = (path: string) => (e: React.MouseEvent) => {
+    e.preventDefault();
+    console.log("[MobileBottomNav] Navigating to:", path);
+    router.push(path);
  };

  if (!isClient) return null;
@@ -82,94 +91,85 @@ export default function MobileBottomNav({
            variant="ghost"
            size="sm"
            className="flex-col gap-0.5 h-auto px-2 py-2"
-            onClick={() => setIsCategoryOpen(true)}
+            onClick={() => {
+              console.log("[MobileBottomNav] Catalog clicked");
+              setIsCategoryOpen(true);
+            }}
          >
            <Menu className="h-5 w-5 text-gray-600" />
-            <span className="text-xs text-gray-700">{t.catalog}</span>
+            <span className="text-xs text-gray-700">{t("common.catalog")}</span>
          </Button>

          {/* Favorites Button */}
-          <Link href="/favorites">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="relative flex-col gap-0.5 h-auto px-2 py-2"
-            >
-              <div className="relative">
-                <Heart className="h-5 w-5 text-gray-600" />
-                <Badge
-                  variant="destructive"
-                  className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
-                >
-                  {favoritesData?.length || 0}
-                </Badge>
-              </div>
-              <span className="text-xs text-gray-700">{t.favorites}</span>
-            </Button>
-          </Link>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="relative flex-col gap-0.5 h-auto px-2 py-2"
+            onClick={handleNavigation("/favorites")}
+          >
+            <div className="relative">
+              <Heart className="h-5 w-5 text-gray-600" />
+              <Badge
+                variant="destructive"
+                className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
+              >
+                {favoritesData?.length || 0}
+              </Badge>
+            </div>
+            <span className="text-xs text-gray-700">{t("common.favorites")}</span>
+          </Button>

          {/* Orders Button */}
-          <Link href="/orders">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="relative flex-col gap-0.5 h-auto px-2 py-2"
-            >
-              <div className="relative">
-                <Truck className="h-5 w-5 text-gray-600" />
-                <Badge
-                  variant="destructive"
-                  className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
-                >
-                  {ordersData?.length || 0}
-                </Badge>
-              </div>
-              <span className="text-xs text-gray-700">{t.orders}</span>
-            </Button>
-          </Link>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="relative flex-col gap-0.5 h-auto px-2 py-2"
+            onClick={handleNavigation("/orders")}
+          >
+            <div className="relative">
+              <Truck className="h-5 w-5 text-gray-600" />
+              <Badge
+                variant="destructive"
+                className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
+              >
+                {ordersData?.length || 0}
+              </Badge>
+            </div>
+            <span className="text-xs text-gray-700">{t("common.orders")}</span>
+          </Button>

          {/* Cart Button */}
-          <Link href="/cart">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="relative flex-col gap-0.5 h-auto px-2 py-2"
-            >
-              <div className="relative">
-                <ShoppingCart className="h-5 w-5 text-gray-600" />
-                <Badge
-                  variant="destructive"
-                  className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
-                >
-                  {cartData?.data?.length || 0}
-                </Badge>
-              </div>
-              <span className="text-xs text-gray-700">{t.cart}</span>
-            </Button>
-          </Link>
-
-          {isAuthenticated ? (
-            <Link href={`/${locale}/me`}>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="flex-col gap-0.5 h-auto px-2 py-2"
+          <Button
+            variant="ghost"
+            size="sm"
+            className="relative flex-col gap-0.5 h-auto px-2 py-2"
+            onClick={handleNavigation("/cart")}
+          >
+            <div className="relative">
+              <ShoppingCart className="h-5 w-5 text-gray-600" />
+              <Badge
+                variant="destructive"
+                className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
              >
-                <User className="h-5 w-5 text-gray-600" />
-                <span className="text-xs text-gray-700">{t.profile}</span>
-              </Button>
-            </Link>
-          ) : (
-            <Button
-              variant="ghost"
-              size="sm"
-              className="flex-col gap-0.5 h-auto px-2 py-2"
-              onClick={onLoginClick}
-            >
-              <User className="h-5 w-5 text-gray-600" />
-              <span className="text-xs text-gray-700">{t.login}</span>
-            </Button>
-          )}
+                {cartData?.data?.length || 0}
+              </Badge>
+            </div>
+            <span className="text-xs text-gray-700">{t("common.cart")}</span>
+          </Button>
+
+          {/* Profile/Login Button */}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="flex-col gap-0.5 h-auto px-2 py-2"
+            onClick={handleProfileClick}
+            disabled={authLoading}
+          >
+            <User className="h-5 w-5 text-gray-600" />
+            <span className="text-xs text-gray-700">
+              {authLoading ? "..." : (isAuthenticated ? t("profile") : t("login"))}
+            </span>
+          </Button>
        </div>
      </div>

@@ -177,7 +177,7 @@ export default function MobileBottomNav({
      <Sheet open={isCategoryOpen} onOpenChange={setIsCategoryOpen}>
        <SheetContent side="left" className="w-[300px] p-0">
          <SheetHeader className="p-4 border-b">
-            <SheetTitle>{t.catalog}</SheetTitle>
+            <SheetTitle>{t("common.catalog")}</SheetTitle>
          </SheetHeader>
          <ScrollArea className="h-[calc(100vh-80px)]">
            <div className="p-4">
@@ -214,4 +214,4 @@ export default function MobileBottomNav({
      </Sheet>
    </>
  );
-}
+}
--- a/components/layout/ui/LanguageSelector.tsx
+++ b/components/layout/ui/LanguageSelector.tsx
@@ -43,7 +43,7 @@ export default function LanguageSelector() {

  return (
    <Select value={locale} onValueChange={handleLanguageChange}>
-      <SelectTrigger className="w-[70px] rounded-xl border-gray-300">
+      <SelectTrigger className="w-[70px] md:h-10! flex items-center justify-center rounded-lg border-gray-300">
        <SelectValue>
          <FlagIcon locale={locale} />
        </SelectValue>
--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Tabs({
  className,
@@ -15,7 +15,7 @@ function Tabs({
      className={cn("flex flex-col gap-2", className)}
      {...props}
    />
-  )
+  );
 }

 function TabsList({
@@ -31,7 +31,7 @@ function TabsList({
      )}
      {...props}
    />
-  )
+  );
 }

 function TabsTrigger({
@@ -42,12 +42,12 @@ function TabsTrigger({
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "cursor-pointer data-[state=active]:bg-white dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    />
-  )
+  );
 }

 function TabsContent({
@@ -60,7 +60,7 @@ function TabsContent({
      className={cn("flex-1 outline-none", className)}
      {...props}
    />
-  )
+  );
 }

-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };