pagination + ...

src/app/blogs/components/BlogList.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import HeroSection from './HeroSection'
 import Category from './Category'
 import BigBlogItem from './BigBlogItem'
@@ -10,10 +10,12 @@ import { useBlogStore } from '../store/BlogStore'
 import { useGetAds } from '@/app/ads/hooks/useAdsData'
 import { AdsDisplayLocation } from '@/app/ads/types/AdsTypes'
 import Image from 'next/image'
+import Pagination from '@/components/Pagination'
 const BlogList: FC = () => {
 
     const { selectedCategory } = useBlogStore()
-    const { data } = useGetBlogs(selectedCategory)
+    const [page, setPage] = useState<number>(1)
+    const { data } = useGetBlogs(selectedCategory, page)
     const getAds = useGetAds(AdsDisplayLocation.BLOG_PAGE_TOP_RIGHT)
     const getAdsBottom = useGetAds(AdsDisplayLocation.BLOG_PAGE_BOTTOM_RIGHT)
 
@@ -78,6 +80,19 @@ const BlogList: FC = () => {
                     {data?.data.blogs.map((item) => (
                         <BigBlogItem key={item.id} item={item} />
                     ))}
+
+                    {
+                        data?.data.pager &&
+                        <div>
+                            <Pagination
+                                currentPage={data?.data?.pager.page}
+                                totalPages={data?.data?.pager.totalPages}
+                                onPageChange={(page) => {
+                                    setPage(page)
+                                }}
+                            />
+                        </div>
+                    }
                 </div>
 
                 <div className='block xl:hidden'>

src/app/blogs/components/MostVisited.tsx

@@ -7,7 +7,7 @@ const MostVisited: FC = () => {
     return (
         <div className='w-full rounded-4xl bg-white p-4'>
             <h4>
-                پر بازدیدترین ها
+                انتخاب سردبیر
             </h4>
 
             <div className='flex flex-col gap-6 mt-7 text-sm'>

src/app/blogs/hooks/useBlogsData.ts

@@ -3,10 +3,10 @@ import * as api from "../service/BlogService";
 import { CreateBlogCommentType } from "../types/BlogTypes";
 
 // برای client
-export const useGetBlogs = (categoryId: string) =>
+export const useGetBlogs = (categoryId: string, page: number) =>
   useQuery({
-    queryKey: ["blogs", categoryId],
+    queryKey: ["blogs", categoryId, page],
-    queryFn: () => api.getBlogs(categoryId),
+    queryFn: () => api.getBlogs(categoryId, page),
   });
 
 export const useGetMostVisitedBlogs = () =>
@@ -47,8 +47,8 @@ export const useCreateBlogComment = () =>
 
 // برای server prefetch
 export const blogsQueryOptions = {
-  queryKey: ["blogs", ""],
+  queryKey: ["blogs", "", 1],
-  queryFn: () => api.getBlogs(""),
+  queryFn: () => api.getBlogs("", 1),
 };
 
 export const blogSingleQueryOptions = (id: string) => ({

src/app/blogs/service/BlogService.ts

@@ -7,12 +7,12 @@ import {
   CreateBlogCommentType,
 } from "../types/BlogTypes";
 
-export const getBlogs = async (categoryId: string) => {
+export const getBlogs = async (categoryId: string, page: number) => {
   let query = "";
   if (categoryId) {
-    query = `?categoryId=${categoryId}`;
+    query = `&categoryId=${categoryId}`;
   }
-  const { data } = await axios.get<BlogResponse>(`/blogs${query}`);
+  const { data } = await axios.get<BlogResponse>(`/blogs?page=${page}${query}`);
   return data;
 };
 

src/app/products/service/ProductService.ts

@@ -8,9 +8,9 @@ import {
 } from "../types/ProductTypes";
 
 export const getServicesByCategory = async (categoryId?: string) => {
-  let query = ``;
+  let query = `?limit=50`;
   if (categoryId) {
-    query = `?categoryId=${categoryId}`;
+    query = `&categoryId=${categoryId}`;
   }
   const { data } = await axios.get<ServiceResponse>(
     `/danak-services/public${query}`

src/components/Pagination.tsx

@@ -0,0 +1,100 @@
+'use client'
+import React from "react";
+
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+}
+
+const Pagination: React.FC<PaginationProps> = ({
+    currentPage,
+    totalPages,
+    onPageChange,
+}) => {
+    const getPageNumbers = () => {
+        const pageNumbers: (number | string)[] = [];
+        const maxVisiblePages = 5; // تعداد حداکثری صفحات قابل مشاهده
+
+        if (totalPages <= maxVisiblePages) {
+            for (let i = 1; i <= totalPages; i++) {
+                pageNumbers.push(i);
+            }
+        } else {
+            if (currentPage > 3) {
+                pageNumbers.push(1);
+                if (currentPage > 4) {
+                    pageNumbers.push("...");
+                }
+            }
+
+            const start = Math.max(2, currentPage - 1);
+            const end = Math.min(totalPages - 1, currentPage + 1);
+
+            for (let i = start; i <= end; i++) {
+                pageNumbers.push(i);
+            }
+
+            if (currentPage < totalPages - 2) {
+                if (currentPage < totalPages - 3) {
+                    pageNumbers.push("...");
+                }
+                pageNumbers.push(totalPages);
+            }
+        }
+
+        return pageNumbers;
+    };
+
+    const pageNumbers = getPageNumbers();
+
+    return (
+        <div className="flex gap-2 text-xs justify-center items-center space-x-2 mt-4">
+            {/* دکمه قبلی */}
+            {/* <button
+                className={`px-3 py-1 rounded-md ${currentPage === 1
+                        ? "text-gray-400 cursor-not-allowed"
+                        : "text-blue-600 hover:bg-gray-100"
+                    }`}
+                onClick={() => currentPage > 1 && onPageChange(currentPage - 1)}
+                disabled={currentPage === 1}
+            >
+                قبلی
+            </button> */}
+
+            {/* شماره صفحات */}
+            {pageNumbers.map((page, index) =>
+                typeof page === "number" ? (
+                    <button
+                        key={index}
+                        className={`size-8 rounded-md ${currentPage === page
+                            ? "bg-primary text-white"
+                            : "text-primary bg-[#EAECF5] hover:bg-gray-100"
+                            }`}
+                        onClick={() => onPageChange(page)}
+                    >
+                        {page}
+                    </button>
+                ) : (
+                    <span key={index} className="px-3 py-1 text-gray-500">
+                        {page}
+                    </span>
+                )
+            )}
+
+            {/* دکمه بعدی */}
+            {/* <button
+                className={`px-3 py-1 rounded-md ${currentPage === totalPages
+                        ? "text-gray-400 cursor-not-allowed"
+                        : "text-blue-600 hover:bg-gray-100"
+                    }`}
+                onClick={() => currentPage < totalPages && onPageChange(currentPage + 1)}
+                disabled={currentPage === totalPages}
+            >
+                بعدی
+            </button> */}
+        </div>
+    );
+};
+
+export default Pagination;

src/shared/Header.tsx

@@ -117,7 +117,9 @@ const Header: FC = () => {
                     />
                 </div>
 
-                <Image src='/images/logo.svg' alt='logo' width={73} height={24} />
+                <Link href='/'>
+                    <Image src='/images/logo.svg' alt='logo' width={73} height={24} />
+                </Link>
 
                 <div className='flex gap-2 items-center flex-1 justify-end'>
                     <SearchNormal