pagination updated and added to categorySlug

src/app/(routes)/blog/categories/[categorySlug]/page.tsx

@@ -2,12 +2,15 @@ import { CategoryDataType, categorySlugPropsType } from "@/app/types/types";
 import Image from "next/image";
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import NoDataFounded from "../../components/no-data-founded/noDataFounded";
+import Pagination from "../../components/pagination/pagination";
 
 export default async function SingleCategory({
   params,
+  searchParams,
 }: categorySlugPropsType) {
   const categoryData: CategoryDataType = await fetch(
-    `${process.env.NEXT_PUBLIC_API_URL}/blog/categories/${params.categorySlug}/posts`,
+    `${process.env.NEXT_PUBLIC_API_URL}/blog/categories/${params.categorySlug}/posts?per_page=${searchParams.per_page ? searchParams.per_page : process.env.NEXT_PUBLIC_POSTS_PER_CATEGORY_PAGE}${searchParams.page ? `&page=${searchParams.page}` : ""}`,
     {
       cache: "no-store",
     },
@@ -42,47 +45,54 @@ export default async function SingleCategory({
             </span>
           </li>
           <li className="flex items-center gap-2">
-            <p className="text-[12px] font-[400] capitalize text-blog-text-passive">
+            <Link
+              href={"/blog/categories"}
+              className="text-[12px] font-[400] capitalize text-blog-text-passive hover:underline"
+            >
               categories
-            </p>
+            </Link>
             <span className="mt-[-2px] -rotate-45 scale-[3] select-none text-[12px] font-[400] text-blog-text-passive">
               -
             </span>
           </li>
           <li className="flex items-center gap-2">
-            <p className="text-[12px] font-[600] capitalize text-blog-text-default">
+            <p className="relative text-[12px] font-[600] capitalize text-blog-text-default">
               {categoryData.category.name}
+              <span className="absolute -end-5 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-blog-red">
+                {categoryData.meta.total}
+              </span>
             </p>
           </li>
         </ul>
 
         <div className="flex w-full flex-wrap justify-center gap-10">
-          {categoryData.posts.map((post) => (
-            <div
-              key={post.id}
-              className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]"
-            >
-              <Image
-                className="mb-3 rounded-md"
-                src={post.featured_image}
-                alt={`${post.title} post featured image`}
-                loading="lazy"
-                width={600}
-                height={500}
-              />
-              <div className="mb-2 flex w-full flex-wrap gap-2">
-                <div className="flex gap-2">
-                  <p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
-                    BY
-                  </p>
-                  <Link
-                    href={"/"}
-                    className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default hover:underline md:text-[16px]"
-                  >
-                    {post.author.name}
-                  </Link>
-                </div>
-                {/* <div className="whit flex gap-2">
+          {categoryData.posts.length > 0 ? (
+            categoryData.posts.map((post) => (
+              <div
+                key={post.id}
+                className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]"
+              >
+                <Image
+                  className="mb-3 rounded-md"
+                  src={post.featured_image}
+                  alt={`${post.title} post featured image`}
+                  loading="lazy"
+                  width={600}
+                  height={500}
+                />
+                <div className="mb-2 flex w-full flex-wrap gap-2">
+                  <div className="flex gap-2">
+                    <p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
+                      BY
+                    </p>
+                    <Link
+                      href={"/"}
+                      className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default hover:underline md:text-[16px]"
+                    >
+                      {post.author.name}
+                    </Link>
+                  </div>
+                  {/* <div className="whit flex gap-2">
                   <p className="text-[16px] font-[600] text-blog-text-passive">
                     IN
                   </p>
@@ -93,19 +103,28 @@ export default async function SingleCategory({
                     {post.category.name}
                   </Link>
                 </div> */}
+                </div>
+                <Link
+                  className="w-full text-start text-[24px] font-[600] text-blog-text-default hover:underline"
+                  href={`/blog/posts/${post.slug}`}
+                >
+                  {post.title}
+                </Link>
+                <p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
+                  {post.excerpt}
+                </p>
               </div>
-              <Link
-                className="w-full text-start text-[24px] font-[600] text-blog-text-default hover:underline"
-                href={`/blog/posts/${post.slug}`}
-              >
-                {post.title}
-              </Link>
-              <p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
-                {post.excerpt}
-              </p>
-            </div>
-          ))}
+            ))
+          ) : (
+            <NoDataFounded />
+          )}
         </div>
+        {categoryData.posts.length > 0 && categoryData.meta.last_page > 1 && (
+          <Pagination
+            meta={categoryData.meta}
+            baseUrl={`/blog/categories/${categoryData.category.slug}`}
+          />
+        )}
       </div>
     </div>
   );

src/app/(routes)/blog/categories/page.tsx

@@ -46,8 +46,11 @@ export default async function Categories({
             </span>
           </li>
           <li className="flex items-center gap-2">
-            <p className="text-[12px] font-[600] capitalize text-blog-text-default">
+            <p className="relative text-[12px] font-[600] capitalize text-blog-text-default">
               categories
+              <span className="absolute -end-5 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-blog-red">
+                {CategoriesData.meta.total}
+              </span>
             </p>
           </li>
         </ul>
@@ -86,7 +89,7 @@ export default async function Categories({
         </div>
         {CategoriesData.data.length > 0 &&
           CategoriesData.meta.last_page > 1 && (
-            <Pagination meta={CategoriesData.meta} />
+            <Pagination meta={CategoriesData.meta} baseUrl="/blog/categories" />
           )}
       </div>
     </div>

src/app/(routes)/blog/components/pagination/pagination.tsx

@@ -13,9 +13,10 @@ interface Meta {
 
 interface PaginationProps {
   meta: Meta;
+  baseUrl: string; // اضافه کردن prop برای base URL
 }
 
-const Pagination: React.FC<PaginationProps> = ({ meta }) => {
+const Pagination: React.FC<PaginationProps> = ({ meta, baseUrl }) => {
   const { current_page, last_page, total } = meta;
   const searchParams = useSearchParams();
 
@@ -27,7 +28,7 @@ const Pagination: React.FC<PaginationProps> = ({ meta }) => {
   const generatePageLink = (page: number): string => {
     const params = new URLSearchParams(searchParams.toString());
     params.set("page", page.toString());
-    return `/blog/categories?${params.toString()}`;
+    return `${baseUrl}?${params.toString()}`; // استفاده از baseUrl
   };
 
   const renderPageNumbers = (): (JSX.Element | string)[] => {

src/app/types/types.ts

@@ -54,6 +54,7 @@ export type PostType = {
 
 export type categorySlugPropsType = {
   params: { categorySlug: string };
+  searchParams: any;
 };
 
 export type categoryPropsType = {
@@ -73,7 +74,8 @@ export type PaginationType = {
 export type CategoryDataType = {
   category: CategoryType;
   posts: PostType[];
-  pagination: PaginationType;
+  meta: any;
+  links: any;
 };
 
 export type FilteredPostsPagepropsType = {