Feat: Adding next-prev component (#807)

* feat: next-prev-comp inital

* activating buttons

Author: DhairyaMajmudar

components/NextPrevButton.tsx

@@ -0,0 +1,46 @@
+import Image from 'next/image';
+import React from 'react';
+
+export default function NextPrevButton({ prev, next }: any) {
+  return (
+    <div className='mb-4 flex flex-row gap-4'>
+      <div className='h-auto w-1/2'>
+        <div
+          className='cursor-pointer rounded border border-gray-200 p-4 text-center shadow-md transition-all duration-300 ease-in-out hover:border-gray-300 hover:shadow-lg dark:shadow-xl dark:hover:shadow-2xl dark:drop-shadow-lg 
+          lg:text-left'
+        >
+          <div className='text-primary dark:text-slate-300 flex flex-row gap-5 text-[18px]'>
+            <Image
+              src={'/icons/arrow.svg'}
+              height={10}
+              width={10}
+              alt='prev icon'
+              className='rotate-180 w-5 '
+            />
+            <div className='my-auto inline font-bold uppercase '>Go Back</div>
+          </div>
+          <div className='my-2 text-base font-medium text-slate-600 dark:text-slate-300'>
+            {prev}
+          </div>
+        </div>
+      </div>
+      <div className='h-auto w-1/2'>
+        <div className='h-full cursor-pointer rounded border border-gray-200 p-4 text-center shadow-md transition-all duration-300 ease-in-out hover:border-gray-300 hover:shadow-lg dark:shadow-xl dark:drop-shadow-lg dark:hover:shadow-2xl lg:text-right'>
+          <div className='text-primary  dark:text-slate-300 flex flex-row-reverse gap-5 text-[18px]'>
+            <Image
+              src={'/icons/arrow.svg'}
+              height={10}
+              width={10}
+              alt='next icon '
+              className='w-5'
+            />
+            <div className='my-auto inline font-bold uppercase '>Up Next</div>
+          </div>
+          <div className='my-2 text-base font-medium text-slate-600 dark:text-slate-300'>
+            {next}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

pages/learn/[slug].page.tsx

@@ -7,6 +7,7 @@ import getStaticMarkdownProps from '~/lib/getStaticMarkdownProps';
 import { Headline1 } from '~/components/Headlines';
 import { SectionContext } from '~/context';
 import { DocsHelp } from '~/components/DocsHelp';
+import NextPrevButton from '~/components/NextPrevButton';
 
 export async function getStaticPaths() {
   return getStaticMarkdownPaths('pages/learn');
@@ -31,6 +32,7 @@ export default function StaticMarkdownPage({
       </Head>
       <Headline1>{frontmatter.title}</Headline1>
       <StyledMarkdown markdown={content} />
+      <NextPrevButton prev={frontmatter.prev} next={frontmatter.next} />
       <DocsHelp markdownFile={markdownFile} />
     </SectionContext.Provider>
   );

pages/learn/file-system.md

@@ -1,6 +1,8 @@
 ---
 section: docs
 title: Modeling a file system with JSON Schema
+prev: Modelling a file system
+next: Other examples
 ---
 
 In this step-by-step guide you will learn how to design a JSON Schema that mirrors the structure of an `/etc/fstab` file. 

pages/learn/getting-started-step-by-step.md

@@ -1,6 +1,8 @@
 ---
 title: Creating your first schema
 section: docs
+prev: prev
+next: Miscellaneous examples
 ---
 
 JSON Schema is a vocabulary that you can use to annotate and validate JSON documents. This tutorial guides you through the process of creating a JSON Schema document.

pages/learn/json-schema-examples.md

@@ -1,6 +1,8 @@
 ---
 section: docs
 title: JSON Schema examples
+prev: Modelling a file system
+next: JSON Schema Glossary
 ---
 
 In this page, you will find examples illustrating different use cases to help you get the most out of your JSON Schemas. These examples cover a wide range of scenarios, and each example comes with accompanying JSON data and explanation, showcasing how JSON Schemas can be applied to various domains. You can modify these examples to suit your specific needs, as this is just one of the many ways you can utilize JSON Schemas.

pages/learn/miscellaneous-examples.md

@@ -1,6 +1,8 @@
 ---
 section: docs
 title: Miscellaneous Examples
+prev: Creating your first schema
+next: Modelling a file system
 ---
 
 In this page, you will find miscellaneous examples illustrating different uses cases to help you get the most out of your JSON Schemas. Each example comes with accompanying JSON data and explanation.