google tag manger

pages/_app.js

@@ -15,7 +15,7 @@ import TopHeader from "@/layout/TopHeader";
 import Providers from "@/redux/providers";
 import { store } from "@/redux/store";
 
-export default function App({ Component, pageProps, title = "Advith", description = "Title"  }) {
+export default function App({ Component, pageProps, title = "Advith", description = "Finance Consulting - Powered by Knowledge, Driven by People, Committed to Client Servicing"  }) {
   return (
     <>
       <Providers store={store}>
@@ -33,23 +33,48 @@ export default function App({ Component, pageProps, title = "Advith", descriptio
           <link
             rel="apple-touch-icon"
             sizes="180x180"
-            href="images/apple-touch-icon.png"
+            href="images/fav.png"
           />
           <link
             rel="icon"
             type="image/png"
             sizes="32x32"
-            href="images/favicon-32x32.png"
+            href="images/fav.png"
           />
           <link
             rel="icon"
             type="image/png"
             sizes="16x16"
-            href="images/favicon-16x16.png"
+            href="images/fav.png"
           />
+
+        {/* Google Tag Manager Script */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+              j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+              'https://www.googletagmanager.com/gtm.js?id=' + i + dl;f.parentNode.insertBefore(j,f);
+              })(window,document,'script','dataLayer','GTM-KKQVF9HD');
+            `,
+          }}
+        />
+        {/* End Google Tag Manager */}
       </Head>
+
+      {/* Google Tag Manager (NoScript) */}
+      <noscript
+        dangerouslySetInnerHTML={{
+          __html: `
+            <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KKQVF9HD"
+            height="0" width="0" style="display:none;visibility:hidden"></iframe>
+          `,
+        }}
+      />
         {/* <TopHeader /> */}
         <Header />
+       
         <Component {...pageProps} />
         <GoTop />
         <Footer />

pages/blog/index.js

@@ -10,6 +10,7 @@ import Image from "next/image";
 import qs from "qs";
 import axios from "axios";
 import Seo from "@/components/reuseables/Seo/Seo";
+import Pagination from "react-js-pagination";
 
 
 const blogs = ({Blogpage }) => {
@@ -21,16 +22,15 @@ const blogs = ({Blogpage }) => {
   const blogData = useSelector((state) => state.bloglist.data)
 
 
-  const postsPerPage = 3; // Define how many posts to show per page
-  const [currentPage, setCurrentPage] = useState(0);
+  // Pagination setup
+  const [currentPage, setCurrentPage] = useState(1); // Start at page 1
+  const postsPerPage = 3; // Number of items per page
+  const offset = (currentPage - 1) * postsPerPage; // Calculate offset
+  const currentItems = blogData?.slice(offset, offset + postsPerPage);
 
-  // Calculate the posts to display for the current page
-  const offset = currentPage * postsPerPage;
-  const currentPosts = blogData.slice(offset, offset + postsPerPage);
-
-  // Handle page change
-  const handlePageClick = ({ selected }) => {
-    setCurrentPage(selected);
+  // Handle page click
+  const handlePageClick = (pageNumber) => {
+    setCurrentPage(pageNumber); // Update current page
   };
 
 
@@ -59,8 +59,8 @@ const blogs = ({Blogpage }) => {
           <Row className="g-4">
             <Col lg={12} md={12}>
               <div className="row justify-content-center h-100">
-                {currentPosts &&
-                  currentPosts.map((post, index) => (
+                {currentItems &&
+                  currentItems.map((post, index) => (
                     <Col lg={4} md={4} key={index}>
                       <div className="single-blog-post">
                         <div className="post-image">
@@ -98,7 +98,7 @@ const blogs = ({Blogpage }) => {
           </Row>
 
           {/* Pagination */}
-          <ReactPaginate
+          {/* <ReactPaginate
             previousLabel={"<<"}
             nextLabel={">>"}
             breakLabel={"..."}
@@ -108,7 +108,24 @@ const blogs = ({Blogpage }) => {
             onPageChange={handlePageClick}
             containerClassName={"pagination custom-pagination"}
             activeClassName={"active"}
+          /> */}
+
+{blogData?.length > postsPerPage && (
+            <div className="custom-pagination">
+              <Pagination
+                activePage={currentPage}
+                itemsCountPerPage={postsPerPage}
+                totalItemsCount={blogData?.length}
+                onChange={handlePageClick}
+                hideNavigation={true}
+                itemClass="page-item"
+                linkClass="page-numbers"
+                linkClassFirst="prev"
+                linkClassLast="next"
               />
+            </div>
+          )}
+
         </Container>
       </div>