From ee5cd1cac311d6aa764075a4dd0a4ba51d75ac68 Mon Sep 17 00:00:00 2001
From: lakshya <lakshyasatpal372@gmail.com>
Date: Sun, 25 Feb 2024 13:07:36 +0530
Subject: [PATCH] add pagination to sistent pages

Signed-off-by: lakshya <lakshyasatpal372@gmail.com>
---
 src/components/SistentNavigation/content.js      |  5 +++--
 src/components/SistentNavigation/pagination.js   | 10 +++++-----
 .../SistentNavigation/pagination.style.js        | 16 ++++++++++++++++
 src/sections/Projects/Sistent/about.js           |  4 ++--
 src/sections/Projects/Sistent/components.js      |  4 +++-
 .../Projects/Sistent/identity/color/index.js     |  2 ++
 .../Projects/Sistent/identity/color/overview.js  |  1 -
 7 files changed, 31 insertions(+), 11 deletions(-)
 create mode 100644 src/components/SistentNavigation/pagination.style.js

diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js
index 4f6ce67f484b..7fc89424582e 100644
--- a/src/components/SistentNavigation/content.js
+++ b/src/components/SistentNavigation/content.js
@@ -1,5 +1,6 @@
 export const content = [
   { id: 0, link: "/projects/sistent/about", text: "About Sistent" },
-  { id: 1, link: "/projects/sistent/identity", text: "Identity" },
-  { id: 2, link: "/projects/sistent/components", text: "Components" },
+  { id: 1, link: "/projects/sistent/identity/color", text: "Colors" },
+  { id: 2, link: "/projects/sistent/identity/spacing", text: "Spacing" },
+  { id: 3, link: "/projects/sistent/components", text: "Components" },
 ];
diff --git a/src/components/SistentNavigation/pagination.js b/src/components/SistentNavigation/pagination.js
index d16fa2b3f05c..52f24ff99b17 100644
--- a/src/components/SistentNavigation/pagination.js
+++ b/src/components/SistentNavigation/pagination.js
@@ -2,9 +2,9 @@ import React, { useEffect, useState } from "react";
 
 import { content } from "./content";
 import Button from "../../reusecore/Button";
-import TocPaginationWrapper from "./TocPagination.style";
+import PaginationWrapper from "./pagination.style";
 
-const TocPagination = () => {
+const SistentPagination = () => {
   const [currentPage, setCurrentPage] = useState(0);
 
   useEffect(() => {
@@ -14,7 +14,7 @@ const TocPagination = () => {
   }, []);
 
   return (
-    <TocPaginationWrapper>
+    <PaginationWrapper>
       {currentPage > 0 ? (
         <Button secondary url={content[currentPage - 1]?.link}>
           &larr; Previous
@@ -26,8 +26,8 @@ const TocPagination = () => {
           Next &rarr;
         </Button>
       ) : null}
-    </TocPaginationWrapper>
+    </PaginationWrapper>
   );
 };
 
-export default TocPagination;
+export default SistentPagination;
diff --git a/src/components/SistentNavigation/pagination.style.js b/src/components/SistentNavigation/pagination.style.js
new file mode 100644
index 000000000000..8ae9c5570b0a
--- /dev/null
+++ b/src/components/SistentNavigation/pagination.style.js
@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+const TocPaginationWrapper = styled.div`
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  margin: 3rem 2rem 4rem 2rem;
+
+  @media screen and (max-width: 540px) {
+    margin: 0 0 2rem 0;
+    flex-flow: row wrap;
+    gap: 0.3rem;
+  }
+`;
+
+export default TocPaginationWrapper;
diff --git a/src/sections/Projects/Sistent/about.js b/src/sections/Projects/Sistent/about.js
index 48fef0d278c4..6fd82e3962f2 100644
--- a/src/sections/Projects/Sistent/about.js
+++ b/src/sections/Projects/Sistent/about.js
@@ -3,7 +3,7 @@ import { Container } from "../../../reusecore/Layout";
 import SistentWrapper from "./sistent.style";
 import TOC from "../../../components/SistentNavigation";
 import IntraPage from "../../../components/handbook-navigation/intra-page";
-import TocPagination from "../../../components/handbook-navigation/TocPagination";
+import SistentPagination from "../../../components/SistentNavigation/pagination";
 
 const contents = [{ id: 0, link: "#About Sistent", text: "About Sistent" }];
 
@@ -21,7 +21,7 @@ const SistentAbout = () => {
               <h2>About Sistent</h2>
             </a>
           </div>
-          <TocPagination />
+          <SistentPagination />
         </Container>
         <IntraPage contents={contents} />
       </div>
diff --git a/src/sections/Projects/Sistent/components.js b/src/sections/Projects/Sistent/components.js
index 007352ba5854..eb0a561b7bff 100644
--- a/src/sections/Projects/Sistent/components.js
+++ b/src/sections/Projects/Sistent/components.js
@@ -3,8 +3,9 @@ import { Container } from "../../../reusecore/Layout";
 import SistentWrapper from "./sistent.style";
 import TOC from "../../../components/SistentNavigation";
 import IntraPage from "../../../components/handbook-navigation/intra-page";
+import SistentPagination from "../../../components/SistentNavigation/pagination";
 
-const contents = [{ id: 0, link: "#About", text: "" }];
+const contents = [{ id: 0, link: "#About", text: "Hey Yo" }];
 
 const SistentComponents = () => {
   return (
@@ -20,6 +21,7 @@ const SistentComponents = () => {
               <h2>Components</h2>
             </a>
           </div>
+          <SistentPagination />
         </Container>
         <IntraPage contents={contents} />
       </div>
diff --git a/src/sections/Projects/Sistent/identity/color/index.js b/src/sections/Projects/Sistent/identity/color/index.js
index edf742075825..374dcdb1d9a4 100644
--- a/src/sections/Projects/Sistent/identity/color/index.js
+++ b/src/sections/Projects/Sistent/identity/color/index.js
@@ -7,6 +7,7 @@ import Button from "../../../../../reusecore/Button";
 import ColorOverview from "./overview";
 import ColorGuidance from "./guidance";
 import ColorCode from "./code";
+import SistentPagination from "../../../../../components/SistentNavigation/pagination";
 
 const overviewContents = [
   { id: 0, link: "#Introduction", text: "Introduction" },
@@ -81,6 +82,7 @@ const SistentIdentityColor = () => {
             {activeTab === "guidance" && <ColorGuidance />}
             {activeTab === "code" && <ColorCode />}
           </div>
+          <SistentPagination />
         </Container>
         <IntraPage contents={contents()} />
       </div>
diff --git a/src/sections/Projects/Sistent/identity/color/overview.js b/src/sections/Projects/Sistent/identity/color/overview.js
index a41e500096bf..e595cf3c9f9b 100644
--- a/src/sections/Projects/Sistent/identity/color/overview.js
+++ b/src/sections/Projects/Sistent/identity/color/overview.js
@@ -193,7 +193,6 @@ const ColorOverview = () => {
         there might be no need to have a variation of its hue represent it, as
         is evident in the example above.
       </p>
-      <TocPagination />
     </div>
   );
 };