add pagination to sistent pages

Signed-off-by: lakshya <[email protected]>

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" },
 ];

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;

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;

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>

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>

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>

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>
   );
 };