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	"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;