pagination added to product page

2026-02-19 17:11:08 +05:00
parent ed4363e523
commit d8faba0fb5
6 changed files with 336 additions and 70 deletions
--- a/components/pages/products/product/mianProduct.tsx
+++ b/components/pages/products/product/mianProduct.tsx
@@ -5,50 +5,71 @@ import { useQuery } from "@tanstack/react-query";
 import ProductCard from "./productCard";
 import { useCategory } from "@/store/useCategory";
 import { useFilter } from "@/lib/filter-zustand";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useProductPageInfo } from "@/store/useProduct";
 import { useSubCategory } from "@/store/useSubCategory";
 import { useTranslations } from "next-intl";
+import PaginationLite from "@/components/paginationUI";

 export default function MainProduct() {
  const t = useTranslations();
-  const category = useCategory((state) => state.category);
-  const subCategory = useSubCategory((state) => state.subCategory);
-  const filter = useFilter((state) => state.filter);
-  const getFiltersByType = useFilter((state) => state.getFiltersByType);
-  const setProduct = useProductPageInfo((state) => state.setProducts);
-  // Query params yaratish
+  const category = useCategory((s) => s.category);
+  const subCategory = useSubCategory((s) => s.subCategory);
+  const filter = useFilter((s) => s.filter);
+  const getFiltersByType = useFilter((s) => s.getFiltersByType);
+  const setProduct = useProductPageInfo((s) => s.setProducts);
+
+  const [currentPage, setCurrentPage] = useState(1);
+
  const queryParams = useMemo(() => {
    const catalog = getFiltersByType("catalog");
    const size = getFiltersByType("size");
-
-    // Har bir filter uchun query string yaratish
-    const catalogParams = catalog.map((item) => `catalog=${item.id}`).join("&");
-    const sizeParams = size.map((item) => `size=${item.id}`).join("&");
-
-    // Barcha paramslarni birlashtirish for gitea
+    const catalogParams = catalog.map((i) => `catalog=${i.id}`).join("&");
+    const sizeParams = size.map((i) => `size=${i.id}`).join("&");
    const allParams = [catalogParams, sizeParams].filter(Boolean).join("&");
-
+    setCurrentPage(1);
    return allParams ? `&${allParams}` : "";
-  }, [filter, getFiltersByType]);
+  }, [filter]);

-  // Request link yaratish
  const requestLink = useMemo(() => {
    const baseLink = category.have_sub_category
-      ? endPoints.product.bySubCategory(subCategory.id)
-      : endPoints.product.byCategory(category.id || 0);
-
-    // Query params qo'shish
+      ? endPoints.product.bySubCategory({ id: subCategory.id, currentPage })
+      : endPoints.product.byCategory({ id: category.id, currentPage });
    return `${baseLink}${queryParams}`;
-  }, [category.id, category.have_sub_category, queryParams, subCategory.id]);
+  }, [
+    category.id,
+    category.have_sub_category,
+    queryParams,
+    subCategory.id,
+    currentPage,
+  ]);

  const { data, isLoading, error } = useQuery({
-    queryKey: ["products", subCategory.id, queryParams],
+    queryKey: [
+      "products",
+      subCategory.id,
+      category.id,
+      queryParams,
+      currentPage,
+    ],
    queryFn: () => httpClient(requestLink),
-    select: (data) => data?.data?.data?.results,
+    placeholderData: (prev) => prev, // ✅ pagination da flicker yo'q
+    select: (res) => ({
+      results: res?.data?.data?.results ?? [],
+      totalPages: res?.data?.data?.total_pages ?? 1,
+    }),
  });

-  if (isLoading) {
+  // ✅ To'g'ridan select dan olamiz — useEffect + let emas
+  const results = useMemo(() => {
+    return data?.results ?? [];
+  }, [data]);
+  const totalPages = useMemo(() => {
+    return data?.totalPages ?? 1;
+  }, [data]);
+
+  if (isLoading && !data) {
+    // ✅ placeholderData bor — faqat birinchi yuklanishda
    return (
      <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
        {[1, 2, 3].map((i) => (
@@ -59,10 +80,12 @@ export default function MainProduct() {
  }

  if (error) {
-    return <div className="text-center text-red-500 py-10">{t("loadingError")}</div>;
+    return (
+      <div className="text-center text-red-500 py-10">{t("loadingError")}</div>
+    );
  }

-  if (!data || data.length === 0) {
+  if (!results.length) {
    return (
      <div className="text-center text-gray-400 py-10">
        {t("productsNotFound")}
@@ -71,16 +94,29 @@ export default function MainProduct() {
  }

  return (
-    <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
-      {data.map((item: any) => (
-        <ProductCard
-          key={item.id} // ✅ index o'rniga id ishlatish
-          getProduct={() => setProduct(item)}
-          title={item.name}
-          image={item?.images[0]?.image || ""}
-          slug="special_product"
+    <div >
+      {/* ✅ isLoading da overlay — list o'rnini saqlab, ustidan opacity */}
+      <div
+        className={`grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5 transition-opacity ${isLoading ? "opacity-50 pointer-events-none" : "opacity-100"}`}
+      >
+        {results.map((item: any) => (
+          <ProductCard
+            key={item.id}
+            getProduct={() => setProduct(item)}
+            title={item.name}
+            image={item?.images?.[0]?.image || ""}
+            slug="special_product"
+          />
+        ))}
+      </div>
+
+      {totalPages > 1 && (
+        <PaginationLite
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onChange={(p) => setCurrentPage(p)}
        />
-      ))}
+      )}
    </div>
  );
 }
--- a/components/pages/products/product/productCard.tsx
+++ b/components/pages/products/product/productCard.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useLocale } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";
@@ -18,26 +20,141 @@ export default function ProductCard({
  const locale = useLocale();

  return (
-    <Link href={`/${locale}/catalog_page/products/${slug}`} onClick={getProduct} className="hover:bg-[#171616] duration-200" >
-      <article className="group transition-all duration-300 hover:cursor-pointer max-sm:max-w-100 max-sm:mx-auto max-sm:w-full">
+    <Link
+      href={`/${locale}/catalog_page/products/${slug}`}
+      onClick={getProduct}
+      className="group block"
+    >
+      <article className="
+        relative
+        bg-neutral-900
+        border border-zinc-800
+        rounded-xl
+        overflow-hidden
+        transition-all duration-300
+        hover:border-red-600/60
+        hover:shadow-[0_0_24px_0_rgba(220,38,38,0.15)]
+        max-sm:max-w-100 max-sm:mx-auto max-sm:w-full
+        h-95 flex flex-col 
+      ">
+
+        {/* Top accent line */}
+        <div className="
+          absolute top-0 left-0 right-0 h-0.5
+          bg-linear-to-r from-transparent via-red-600 to-transparent
+          opacity-0 group-hover:opacity-100
+          transition-opacity duration-300
+          z-10
+        " />
+
        {/* Image Container */}
-        <div className="relative rounded-2xl h-45 sm:h-55 md:h-65 lg:w-[95%] w-[90%] mx-auto overflow-hidden">
+        <div className="
+          relative
+          h-48 sm:h-56 md:h-64
+          bg-zinc-900
+          border-b border-zinc-800
+          overflow-hidden
+        ">
+          {/* Background pattern */}
+          <div className="
+            absolute inset-0
+            bg-[radial-gradient(circle_at_center,_rgba(39,39,42,0.8)_0%,_rgba(9,9,11,1)_100%)]
+          " />
+
          <Image
            src={image || "/placeholder.svg"}
            alt={title}
            fill
-            className="object-contain transition-transform duration-300 group-hover:scale-105"
+            className="
+              object-contain
+              p-4
+              transition-transform duration-500
+              group-hover:scale-105
+              drop-shadow-[0_4px_12px_rgba(0,0,0,0.5)]
+            "
            sizes="(max-width: 640px) 90vw, (max-width: 1024px) 45vw, 30vw"
          />
+
+          {/* Hover overlay */}
+          <div className="
+            absolute inset-0
+            bg-red-600/5
+            opacity-0 group-hover:opacity-100
+            transition-opacity duration-300
+          " />
        </div>

-        {/* Content Container */}
-        <div className="p-6 sm:p-4">
-          <h3 className="text-lg text-left font-unbounded font-bold text-white mb-4 line-clamp-3 group-hover:text-red-400 transition-colors duration-300">
+        {/* Content */}
+        <div className="p-5">
+          {/* Decorative line */}
+          <div className="
+            w-8 h-0.5
+            bg-red-600
+            mb-3
+            transition-all duration-300
+            group-hover:w-16
+          " />
+
+          <h3 className="
+            text-sm sm:text-base
+            font-bold
+            text-zinc-100
+            line-clamp-3
+            leading-snug
+            tracking-wide
+            transition-colors duration-300
+            group-hover:text-white
+          ">
            {title}
          </h3>
+
+          {/* Bottom row */}
+          <div className="
+            flex items-center justify-between
+            mt-4 pt-4
+            border-t border-zinc-800
+          ">
+            <span className="
+              text-xs
+              text-zinc-500
+              tracking-widest
+              uppercase
+              font-medium
+            ">
+              Batafsil
+            </span>
+
+            {/* Arrow */}
+            <div className="
+              flex items-center justify-center
+              w-7 h-7
+              rounded-full
+              border border-zinc-700
+              text-zinc-500
+              transition-all duration-300
+              group-hover:border-red-600
+              group-hover:text-red-500
+              group-hover:bg-red-600/10
+            ">
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 12 12"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M2 6H10M10 6L7 3M10 6L7 9"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </div>
+          </div>
        </div>
      </article>
    </Link>
  );
-}
+}