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/filter/filter.tsx
+++ b/components/pages/products/filter/filter.tsx
@@ -262,7 +262,7 @@ export default function Filter() {
      )}

      {/* O'lcham filtri */}
-      {visibleSectionNumber && visibleSectionNumber.length > 0 && (
+      {/* {visibleSectionNumber && visibleSectionNumber.length > 0 && (
        <div className="bg-gray-500 rounded-lg">
          <p className="bg-red-500 text-white p-2 font-semibold font-almarai text-lg rounded-t-lg">
            O'lcham
@@ -297,7 +297,7 @@ export default function Filter() {
            {numberExpanded ? "Yashirish" : "Ko'proq ko'rish"}
          </button>
        </div>
-      )}
+      )} */}
    </div>
  );
 }
--- 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>
  );
-}
+}
--- a/components/paginationUI.tsx
+++ b/components/paginationUI.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+
+type Props = {
+  currentPage: number;
+  totalPages: number;
+  onChange: (page: number) => void;
+};
+
+export default function PaginationLite({
+  currentPage,
+  totalPages,
+  onChange,
+}: Props) {
+  const getPages = () => {
+    const visibleCount = 7; // maximum number of items to show (including ellipses)
+    const pages: (number | string)[] = [];
+
+    // If total pages are within visible limit, show all
+    if (totalPages <= visibleCount) {
+      for (let i = 1; i <= totalPages; i++) pages.push(i);
+      return pages;
+    }
+
+    // If current page is near the beginning: show 1..5, ellipsis, last
+    if (currentPage <= 4) {
+      for (let i = 1; i <= 5; i++) pages.push(i);
+      pages.push("…", totalPages);
+      return pages;
+    }
+
+    // If current page is near the end: show first, ellipsis, last-4..last
+    if (currentPage >= totalPages - 3) {
+      pages.push(1, "…");
+      for (let i = totalPages - 4; i <= totalPages; i++) pages.push(i);
+      return pages;
+    }
+
+    // Middle case: first, ellipsis, current-1, current, current+1, ellipsis, last
+    pages.push(
+      1,
+      "…",
+      currentPage - 1,
+      currentPage,
+      currentPage + 1,
+      "…",
+      totalPages,
+    );
+    return pages;
+  };
+
+  const pages = getPages();
+
+  return (
+    <Pagination className="w-full flex justify-center items-center mx-auto">
+      <PaginationContent className="w-full px-auto items-center flex justify-center ">
+        {totalPages !== 1 && (
+          <PaginationPrevious
+            className="hover:cursor-pointer text-white hover:text-white"
+            onClick={() => onChange(Math.max(1, currentPage - 1))}
+          />
+        )}
+
+        {/* Pages */}
+        {pages.map((p, idx) =>
+          p === "…" ? (
+            <PaginationItem key={idx} className="px-2 text-white">
+              …
+            </PaginationItem>
+          ) : (
+            <PaginationItem key={idx}>
+              <PaginationLink
+                className="hover:cursor-pointer text-white hover:text-white"
+                isActive={p === currentPage}
+                onClick={() => onChange(Number(p))}
+              >
+                {p}
+              </PaginationLink>
+            </PaginationItem>
+          ),
+        )}
+        {totalPages !== 1 && (
+          <PaginationNext
+            className="hover:cursor-pointer text-white hover:text-white"
+            onClick={() => onChange(Math.min(totalPages, currentPage + 1))}
+          />
+        )}
+      </PaginationContent>
+    </Pagination>
+  );
+}
--- a/components/ui/pagination.tsx
+++ b/components/ui/pagination.tsx
@@ -1,20 +1,20 @@
-import * as React from 'react'
+import * as React from "react"
 import {
  ChevronLeftIcon,
  ChevronRightIcon,
  MoreHorizontalIcon,
-} from 'lucide-react'
+} from "lucide-react"

-import { cn } from '@/lib/utils'
-import { Button, buttonVariants } from '@/components/ui/button'
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"

-function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
  return (
    <nav
      role="navigation"
      aria-label="pagination"
      data-slot="pagination"
-      className={cn('mx-auto flex w-full justify-center', className)}
+      className={cn("mx-auto flex w-full justify-center", className)}
      {...props}
    />
  )
@@ -23,42 +23,42 @@ function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
 function PaginationContent({
  className,
  ...props
-}: React.ComponentProps<'ul'>) {
+}: React.ComponentProps<"ul">) {
  return (
    <ul
      data-slot="pagination-content"
-      className={cn('flex flex-row items-center gap-1', className)}
+      className={cn("flex flex-row items-center gap-1", className)}
      {...props}
    />
  )
 }

-function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
  return <li data-slot="pagination-item" {...props} />
 }

 type PaginationLinkProps = {
  isActive?: boolean
-} & Pick<React.ComponentProps<typeof Button>, 'size'> &
-  React.ComponentProps<'a'>
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">

 function PaginationLink({
  className,
  isActive,
-  size = 'icon',
+  size = "icon",
  ...props
 }: PaginationLinkProps) {
  return (
    <a
-      aria-current={isActive ? 'page' : undefined}
+      aria-current={isActive ? "page" : undefined}
      data-slot="pagination-link"
      data-active={isActive}
      className={cn(
        buttonVariants({
-          variant: isActive ? 'outline' : 'ghost',
+          variant: isActive ? "outline" : "ghost",
          size,
        }),
-        className,
+        className
      )}
      {...props}
    />
@@ -73,11 +73,10 @@ function PaginationPrevious({
    <PaginationLink
      aria-label="Go to previous page"
      size="default"
-      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
+      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
      {...props}
    >
      <ChevronLeftIcon />
-      <span className="hidden sm:block">Previous</span>
    </PaginationLink>
  )
 }
@@ -90,10 +89,9 @@ function PaginationNext({
    <PaginationLink
      aria-label="Go to next page"
      size="default"
-      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
+      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
      {...props}
    >
-      <span className="hidden sm:block">Next</span>
      <ChevronRightIcon />
    </PaginationLink>
  )
@@ -102,12 +100,12 @@ function PaginationNext({
 function PaginationEllipsis({
  className,
  ...props
-}: React.ComponentProps<'span'>) {
+}: React.ComponentProps<"span">) {
  return (
    <span
      aria-hidden
      data-slot="pagination-ellipsis"
-      className={cn('flex size-9 items-center justify-center', className)}
+      className={cn("flex size-9 items-center justify-center", className)}
      {...props}
    >
      <MoreHorizontalIcon className="size-4" />
@@ -124,4 +122,4 @@ export {
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
-}
+}
--- a/request/links.ts
+++ b/request/links.ts
@@ -1,3 +1,8 @@
+interface ProductTypes {
+  id: number;
+  currentPage: number;
+}
+
 export const endPoints = {
  category: {
    all: "category/",
@@ -10,9 +15,20 @@ export const endPoints = {
    detail: (id: number) => `firesafety/${id}`,
  },
  product: {
-    byCategory: (categoryId: number) => `product/?category=${categoryId}`,
-    bySubCategory: (subCategoryId: number) =>
-      `product/?subCategory=${subCategoryId}`,
+    byCategory: ({ id, currentPage }: ProductTypes) => {
+      let link = "product/";
+      if (id) link += `?category=${id}`;
+      if (currentPage) link += `&page=${currentPage}`;
+
+      return link;
+    },
+    bySubCategory: ({ id, currentPage }: ProductTypes) => {
+      let link = "product/";
+      if (id) link += `?subCategory=${id}`;
+      if (currentPage) link += `&page=${currentPage}`;
+
+      return link;
+    },
    detail: (id: number) => `product/${id}/`,
  },
  faq: "faq/",