pagination and api blog metadata all page

src/components/pages/blog/PostsGrid.tsx

@@ -1,64 +1,67 @@
-import images from '@/assets/images/images';
+'use client';
+
+import { useState } from 'react';
+import Pagination from '@/components/layout/pagination';
+
 import Image from 'next/image';
+import Link from 'next/link';
+import { getPosts } from '@/services/blog';
+import { IPostCardProps } from '@/app/api/blog/data';
 
-const posts = [
-  {
-    title: 'Sustainable Practices Reducing Waste in Industrial Production',
-    image: images.blogImg_1.src,
-    link: '#',
-  },
-  {
-    title: 'Advanced Robotics Revolutionizing Industrial Workflows',
-    image: images.blogImg_1.src,
-    link: '#',
-  },
-  {
-    title: 'Top Benefits of the Robotics in Manufacturing',
-    image: images.blogImg_1.src,
-    link: '#',
-  },
-  {
-    title: 'Leveraging Data Analytics for Smarter Production',
-    image: images.blogImg_1.src,
-    link: '#',
-  },
-  {
-    title: 'Reducing Operational Costs Through Automation',
-    image: '/images/post5.jpg',
-    link: '#',
-  },
-  {
-    title: 'The Advantages of Customized Manufacturing Solutions',
-    image: '/images/post6.jpg',
-    link: '#',
-  },
-];
+export interface IPostsGridProps {
+  initialPosts: IPostCardProps[];
+  initialPagination: {
+    currentPage: number;
+    totalPages: number;
+    totalItems: number;
+    limit: number;
+  };
+}
+
+export default function PostsGrid({
+  initialPosts,
+  initialPagination,
+}: IPostsGridProps) {
+  const [posts, setPosts] = useState(initialPosts);
+  const [pagination, setPagination] = useState(initialPagination);
+
+  const fetchPage = (page: number) => {
+    getPosts(page)
+      .then((res) => {
+        setPosts(res.data);
+        setPagination(res.pagination);
+      })
+      .catch((error) => {
+        console.error('Failed to fetch posts:', error);
+      });
+  };
 
-export default function PostsGrid() {
   return (
-    <div className="container mx-auto grid grid-cols-1 gap-6 px-4 py-14 sm:grid-cols-2 md:py-28 lg:grid-cols-3">
-      {posts.map((post, index) => (
-        <div key={index} className="overflow-hidden bg-white">
-          <div className="relative aspect-[1.09] w-full overflow-hidden rounded-4xl">
-            <Image
-              src={post.image}
-              alt={post.title}
-              fill
-              className="h-auto w-full object-cover"
-            />
+    <div className="container mx-auto px-4 py-14 md:py-28">
+      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {posts.map((post) => (
+          <div key={post.id} className="overflow-hidden bg-white">
+            <div className="relative aspect-[1.09] w-full overflow-hidden rounded-4xl">
+              <Image
+                src={post.imageSrc}
+                alt={post.title}
+                fill
+                className="h-auto w-full object-cover"
+              />
+            </div>
+            <div className="py-7">
+              <h2 className="mb-5 text-xl font-semibold">{post.title}</h2>
+              <a
+                href={post.link}
+                className="text-primary text-base hover:underline"
+              >
+                Read More →
+              </a>
+            </div>
           </div>
-
-          <div className="py-7">
-            <h2 className="mb-5 text-xl font-semibold">{post.title}</h2>
-            <a
-              href={post.link}
-              className="text-primary text-base hover:underline"
-            >
-              Read More →
-            </a>
-          </div>
-        </div>
-      ))}
+        ))}
+      </div>
+      <Pagination {...pagination} onPageChange={fetchPage} />
     </div>
   );
 }

src/components/pages/productCategories/productCategoryCard.d.ts

@@ -7,5 +7,9 @@ export interface IProductCategoryCardProps {
   typesCount: number;
   priceTypeTitle: string;
   bestForTitle: string;
+  meta_description: string;
+  meta_keywords: string;
+  meta_title: string;
+  slug: string;
   description: string;
 }