table of content fix and next-prev button fix

Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>

Author: Rajesh-Nagarajan-11

src/sections/Community/Handbook/handbook-single/HandbookPagination.js

@@ -1,25 +1,30 @@
 import React from "react";
 import { Link } from "gatsby";
-import TocPaginationWrapper from "../../../../components/handbook-navigation/TocPagination.style";
+import { PaginationWrapper } from "../../../components/handbook-navigation/TocPagination.style";
+import Button from "../../../reusecore/Button";
 
 const HandbookPagination = ({ pages, currentSlug }) => {
   const currentIndex = pages.findIndex(page => page.fields.slug === currentSlug);
   const prevPage = currentIndex > 0 ? pages[currentIndex - 1] : null;
   const nextPage = currentIndex < pages.length - 1 ? pages[currentIndex + 1] : null;
 
   return (
-    <TocPaginationWrapper>
-      {prevPage && (
-        <Link to={prevPage.fields.slug} className="prev">
-          ← {prevPage.frontmatter.title}
-        </Link>
-      )}
-      {nextPage && (
-        <Link to={nextPage.fields.slug} className="next">
-          {nextPage.frontmatter.title} →
-        </Link>
-      )}
-    </TocPaginationWrapper>
+    <PaginationWrapper>
+      <div className="previous-page">
+        {prevPage && (
+          <Link to={prevPage.fields.slug}>
+            <Button $secondary title="Previous" />
+          </Link>
+        )}
+      </div>
+      <div className="next-page">
+        {nextPage && (
+          <Link to={nextPage.fields.slug}>
+            <Button $primary title="Next" />
+          </Link>
+        )}
+      </div>
+    </PaginationWrapper>
   );
 };
 

src/sections/Community/Handbook/handbook-single/HandbookTOC.js

@@ -1,12 +1,16 @@
 import React from "react";
 import { Link } from "gatsby";
-import TOCWrapper from "../../../../components/handbook-navigation/toc.style";
+import { TocWrapper } from "../../../components/handbook-navigation/toc.style";
+import { HiOutlineChevronLeft } from "@react-icons/all-files/hi/HiOutlineChevronLeft";
 
 const HandbookTOC = ({ pages, currentSlug }) => {
   return (
-    <TOCWrapper>
+    <TocWrapper>
       <div className="toc-list go-top">
-        <h3>Community Handbook</h3>
+        <h3>
+          <HiOutlineChevronLeft />
+          Table Of Contents
+        </h3>
         <ul>
           {pages.map((page, index) => (
             <li key={index} className={currentSlug === page.fields.slug ? "active" : ""}>
@@ -17,7 +21,7 @@ const HandbookTOC = ({ pages, currentSlug }) => {
           ))}
         </ul>
       </div>
-    </TOCWrapper>
+    </TocWrapper>
   );
 };