feat: prev/next button in docs page to navigate previous and next pag…

…e respectively (#71)

* fix(link): made the logo link to home route

* feat(buttons): added prev and next button in guides docs

* fix(name): changed button names from prev/next to doc names

* fix(line): removed the unnecessary line of code

* style: refactored the links and icon issue and fixed display issue in light mode

* fix(favicon): addded favicon, removed prev/next icon, fixed guides docs layout
---------

Co-authored-by: Sagar Bera <contact.sagarbera@gmail.com>

src/components/guidespage/NavigationButton.tsx

@@ -0,0 +1,81 @@
+import type { FolderStructure } from '@/types/client/FileSystem';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/20/solid';
+import { useRouter } from 'next/router';
+import type { FC } from 'react';
+
+interface NavigationButtonProps {
+  menu: FolderStructure;
+  activeLink: string;
+}
+
+const NavigationButton: FC<NavigationButtonProps> = ({ menu }) => {
+  const router = useRouter();
+
+  const links = Object.entries(menu)
+    .sort((a, b) =>
+      a[0] === 'starting-contribution'
+        ? -1
+        : b[0] === 'starting-contribution'
+        ? 1
+        : 0
+    )
+    .flatMap(([folderName, folder]) =>
+      folderName === 'starting-contribution'
+        ? [
+            folder.find((item) => item.name === 'welcome'),
+            ...folder.filter((item) => item.name !== 'welcome'),
+          ]
+        : folder
+    )
+    .flatMap((item) => item?.link);
+
+  let currentRoute = '';
+  if (Array.isArray(router.query.guide)) {
+    currentRoute = router.query.guide.join('/');
+  }
+  const route = links.findIndex((link) => link?.endsWith(currentRoute));
+  const prevRoute =
+    route > 0 && links[route - 1]?.split('/').pop()?.split('-').join(' ');
+  const nextRoute =
+    route < links.length - 1 &&
+    links[route + 1]?.split('/').pop()?.split('-').join(' ');
+
+  const handlePrevClick = () => {
+    if (route === 0) return;
+    router.push(`${links[route - 1]}`);
+  };
+
+  const handleNextClick = () => {
+    if (route === links.length - 1) return;
+    router.push(`${links[route + 1]}`);
+  };
+
+  return (
+    <div className={`mt-16 flex w-full items-center justify-between`}>
+      <div className="">
+        {prevRoute && (
+          <button
+            onClick={handlePrevClick}
+            className={`flex items-center gap-1 font-semibold capitalize text-skin-base transition-all duration-300 ease-in-out hover:text-accent`}
+          >
+            <ChevronLeftIcon className="h-4 w-4 " />
+            {prevRoute}
+          </button>
+        )}
+      </div>
+      <div className="">
+        {nextRoute && (
+          <button
+            onClick={handleNextClick}
+            className={`flex items-center gap-1 font-medium capitalize text-skin-base transition-all duration-300 ease-in-out hover:text-accent`}
+          >
+            {nextRoute}
+            <ChevronRightIcon className="h-4 w-4 " />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default NavigationButton;

src/components/utilities/Head.tsx

@@ -16,7 +16,7 @@ const Head: FC<HeadProps> = ({
       <meta name="description" content={description} />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <meta httpEquiv="Content-Type" content="text/html; charSet=utf-8" />
-      <link rel="icon" href="/favicon.ico" />
+      <link rel="icon" href="/favicon-dark.svg" />
     </NextHead>
   );
 };

src/components/utilities/Logo.tsx

@@ -1,4 +1,5 @@
 import GitOpenerIcon from '@/components/icons/GitOpener';
+import Link from 'next/link';
 import type { FC } from 'react';
 
 type LogoProps = {
@@ -17,11 +18,12 @@ const Logo: FC<LogoProps> = ({ normal = false, small = false }) => {
   const content = (
     <>
       <GitOpenerIcon className={` ${small ? `h-6 w-6` : `h-8 w-8`}`} />
-      <span
+      <Link
+        href="/"
         className={`font-bold tracking-tight ${small ? `text-xl` : `text-2xl`}`}
       >
         Git Opener
-      </span>
+      </Link>
     </>
   );
 

src/pages/guides/[...guide].tsx

@@ -1,3 +1,4 @@
+import NavigationButton from '@/components/guidespage/NavigationButton';
 import mdxComponents from '@/components/mdxcomponents';
 import TypoComp from '@/components/utilities/TypoComponent';
 import { useDocumentationContext } from '@/context/DocumentationContext';
@@ -29,11 +30,12 @@ const Guides: NextPage<DocsProps> = ({ activeLink, menu, meta, source }) => {
 
   return (
     <DocumentationLayout menu={menu} meta={meta} className="text-skin-base">
-      <Container className="relative py-4">
-        <TypoComp className="max-w-full text-skin-base prose-h5:font-semibold prose-h5:capitalize prose-h5:text-accent">
+      <Container className="relative">
+        <TypoComp className="min-h-screen-50 max-w-full py-4 text-skin-base prose-h5:font-semibold prose-h5:capitalize prose-h5:text-accent">
           <h5>{meta.dirName || meta.fileName}</h5>
           <MDXRemote {...source} components={mdxComponents} />
         </TypoComp>
+        <NavigationButton menu={menu} activeLink={activeLink} />
       </Container>
     </DocumentationLayout>
   );