components/Navigation/Navigator.tsx

"use client";

import useActualPathname from "@/hooks/useActualPathname";
import styles from "@/styles/Navigator.module.css";
import { getDocsPages, resolveDocsURL } from "@/utils/pages";
import Link from "next/link";
import { FC } from "react";
import { MdArrowBack, MdArrowForward } from "react-icons/md";

interface NavigatorProps {}

const flattenRoutes = () => {
    const flatRoutes = [];

    for (const page of getDocsPages()) {
        if (page.url) {
            flatRoutes.push({
                name: page.name,
                url: page.url,
            });
        }

        if (page.children) {
            for (const child of page.children) {
                flatRoutes.push(child);
            }
        }
    }

    return flatRoutes;
};

const flatRoutes = flattenRoutes();

const Navigator: FC<NavigatorProps> = () => {
    const pathname = useActualPathname();

    const currentPage = flatRoutes.findIndex(page => {
        if (!page.url) {
            return false;
        }

        const url = resolveDocsURL(page.url);

        return url === pathname;
    });
    const nextIndex = currentPage + 1;
    const prevIndex = currentPage - 1;
    const nextPage = flatRoutes[nextIndex];
    const prevPage = flatRoutes[prevIndex];

    return (
        <div
            className={styles.root}
            data-wrap={!nextPage || !prevPage ? "true" : "false"}
        >
            {prevPage && (
                <Link
                    href={prevPage.url ? resolveDocsURL(prevPage.url) : "#"}
                    className={`${styles.navigationControl} ${styles.navigationControlBack}`}
                >
                    <div className={styles.iconWrapper}>
                        <MdArrowBack size={26} />
                    </div>
                    <div className={styles.text}>
                        <small>Back</small>
                        <span>{prevPage.name}</span>
                    </div>
                </Link>
            )}
            {nextPage && (
                <Link
                    href={nextPage.url ? resolveDocsURL(nextPage.url) : "#"}
                    className={`${styles.navigationControl} ${styles.navigationControlNext}`}
                >
                    <div className={styles.text}>
                        <small>Next</small>
                        <span>{nextPage.name}</span>
                    </div>
                    <div className={styles.iconWrapper}>
                        <MdArrowForward size={26} />
                    </div>
                </Link>
            )}
        </div>
    );
};

export default Navigator;
1	rakinar2	577	"use client";
2
3			import useActualPathname from "@/hooks/useActualPathname";
4			import styles from "@/styles/Navigator.module.css";
5			import { getDocsPages, resolveDocsURL } from "@/utils/pages";
6			import Link from "next/link";
7			import { FC } from "react";
8			import { MdArrowBack, MdArrowForward } from "react-icons/md";
9
10			interface NavigatorProps {}
11
12			const flattenRoutes = () => {
13			const flatRoutes = [];
14
15			for (const page of getDocsPages()) {
16			if (page.url) {
17			flatRoutes.push({
18			name: page.name,
19			url: page.url,
20			});
21			}
22
23			if (page.children) {
24			for (const child of page.children) {
25			flatRoutes.push(child);
26			}
27			}
28			}
29
30			return flatRoutes;
31			};
32
33			const flatRoutes = flattenRoutes();
34
35			const Navigator: FC<NavigatorProps> = () => {
36			const pathname = useActualPathname();
37
38			const currentPage = flatRoutes.findIndex(page => {
39			if (!page.url) {
40			return false;
41			}
42
43			const url = resolveDocsURL(page.url);
44
45			return url === pathname;
46			});
47			const nextIndex = currentPage + 1;
48			const prevIndex = currentPage - 1;
49			const nextPage = flatRoutes[nextIndex];
50			const prevPage = flatRoutes[prevIndex];
51
52			return (
53			<div
54			className={styles.root}
55			data-wrap={!nextPage \|\| !prevPage ? "true" : "false"}
56			>
57			{prevPage && (
58			<Link
59			href={prevPage.url ? resolveDocsURL(prevPage.url) : "#"}
60			className={`${styles.navigationControl} ${styles.navigationControlBack}`}
61			>
62			<div className={styles.iconWrapper}>
63			<MdArrowBack size={26} />
64			</div>
65			<div className={styles.text}>
66			<small>Back</small>
67			<span>{prevPage.name}</span>
68			</div>
69			</Link>
70			)}
71			{nextPage && (
72			<Link
73			href={nextPage.url ? resolveDocsURL(nextPage.url) : "#"}
74			className={`${styles.navigationControl} ${styles.navigationControlNext}`}
75			>
76			<div className={styles.text}>
77			<small>Next</small>
78			<span>{nextPage.name}</span>
79			</div>
80			<div className={styles.iconWrapper}>
81			<MdArrowForward size={26} />
82			</div>
83			</Link>
84			)}
85			</div>
86			);
87			};
88
89			export default Navigator;